HTML和CSS我的笔记

目录

• 定位
• 文字显示在图片上
• ul的li元素的小圆点换成图片
• 关于Bootstrap的响应式
  • 不要在container以外使用row
  • 不要使用padding的时候固定高度
  • 不要使用<hr
  • p标签不换行
• 图片宽高超过尺寸图片重复
• 图片旋转
• 接入YouTube视频
• 图片默认图
• 文字太长显示...
• 响应式中布局尽可能不要使用margin,padding,相对定位
• 滚动条的使用与隐藏
• css控制鼠标移过元素显示小手

我的笔记,记录遇到的一些问题

定位

下次再使用绝对定位的时候,好比子元素要定位在父元素上,就能够像下面同样

父元素写一个相对定位,能够多加一个display:block,子元素就相对于父元素写一个绝对定位,使用top和left,不要使用margin-left这些

z-index:2;这个是让一个元素置顶到另一个元素的上面,数字越大越在上面

opacity:0.5;这个是图片的透明度,1是原图,0.5是半透明

<a href="" target="_blank" style="display:block;position:relative">
    <img src="" style="position:absolute; z-index:2;opacity:0.5;top:34%;left:40%">
</a>

文字显示在图片上

正确的作法应该是把图片做为一个背景图,在css里面写,以下

.testingplan {width:1210px;height:200px;background:url(/Themes/img/test_plan.jpg)}

ul的li元素的小圆点换成图片

依然是使用css控制li元素,写一个图片

.testingplan li {font-size:14px;list-style-image:url(/Themes/StyleJotrin/img/test_dot.png)}

关于Bootstrap的响应式

不要在container以外使用row

首先,我写了一个HTML以下

<div class="content content-memory">
    <div class="banner-panel">
        <div class="row">
            <div class="col-12">
                <img src="~/images/document_banner.jpg" />
            </div>
        </div>
    </div>
</div>

由于我想让图片是撑满全图的,可是我不知道class=row还有col-12这些东西,是Bootstrap里面才会有的东西

必须在class=container下面才会生效,而我没有写container,却用了Bootstrap的row和col,虽然不是错的,可是没意义

并且个人网页也被撑得出现了横向的滚动条,因此正确的作法是这样的

<div class="content content-memory">
    <div class="banner-panel">
        <img src="~/images/document_banner.jpg" />
    </div>
</div>

而后在css里面控制图片的width=100%便可

不要使用padding的时候固定高度

我有一个具备边框的div,里面有不少内容,我但愿内容和边框有一个距离,可是我把div的高度固定了.....

这样就致使个人响应式变小的时候,内容被撑了出来,因此若是打算使用padding来搞一个内边距,那么不要固定高度

不要使用<hr

我看到下滑线就使用<hr,结果大佬说不要使用<hr 这个是很老很low的写法了,要使用 border-bottom

p标签不换行

个人div写好了是col-8,可是我内部的p元素的文字,在屏幕变小的时候,没有按照8这个块来换行,加上一个css便可

<div class="col-8 document-content">
    <p>aaaaaaaaaaaaaaaa &nbsp;&nbsp;<img src="~/images/file.png" /></p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>

word-wrap: break-word;

图片宽高超过尺寸图片重复

个人图片大小是18*9的,加入我把宽高设置的不是18,9就会出现重叠的情况,例如

只须要你的图片自己是多大的,你就设置多大就行了,宽18,高9

我连这个都不知道,我真的是菜鸡啊,前端菜鸡🐔​

图片旋转

直接上css

-webkit-transform: rotate(180deg);
transition: transform .5s;

接入YouTube视频

这个能够参考官方文档,说的很详细了:YouTube文档

我简单的介绍一下,就下面一行HTML代码

<iframe class="videodetail" type="text/html" src="@Model.Url?rel=0" frameborder="0"></iframe>

介绍一下参数rel=0,2018年9月份以前,rel参数是YouTube视频暂停的时候是否显示相关视频推荐,9月份以后YouTube官方更改了设定,rel参数就是显示的相关视频是不是同一频道的,那我确定要加rel=0啊

否则我接入的视频一暂停出现的相关推荐都是竞争对手的视频,那我不是哭了

接入YouTube视频使用的路径,必须是这样的

https://www.youtube.com/embed/ifNysFzq2dA?rel=0

其中https://www.youtube.com/embed/这玩意是固定的,你若是不这样写,就会报错

就是不让你访问,因此,必须按照这样的格式,后面的rel知道了是相关视频推荐的,中间的这个是视频的id

打开一个youtube视频,上面v=后面的就是视频ID

图片默认图

有时候图片会不显示,出现错误,这个时候就须要设置一个默认图,这样就算图片发生问题了也能够展现一个默认图,排版也不会乱

<img src="@technology.Picture" alt="@technology.Title" onerror="this.onerror='';this.src='/Themes/img/home_news_img.png'">

文字太长显示...

标题有时候会太多字,致使排版全乱了,因此使用css控制一下最大宽度,超过就显示...

max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

响应式中布局尽可能不要使用margin,padding,相对定位

我据说过不要使用margin和padding进行布局,因此我在布局的时候想使用相对绝对定位

/*父元素*/
position:reletive;

/*子元素*/
position:absolute;
left:20%;

可是这样也不行,有人说不能使用定位来进行布局,仍是要使用栅格化

只能乖乖地使用col-12进行布局,多写几层就能够

<div class="container panel">
   <div class="row">
      <div class="col-md-2 col-5 parent-category">
         <img src="main.jpg" alt="Name">
         <p>Remark</p>
      </div>
      <div class="col-md-4 col-7">
         <ul class="row">
            <li class="col-2">
               <p>Name</p>
            </li>
            <li class="col-10">
               <p>Name</p>
            </li>
         </ul>
      </div>
   </div>
</div>

滚动条的使用与隐藏

我有一个ul下的li列表,太多数据了,能够设置一个滚动条,加一个css便可

ul
{
    height: 500px;
    overflow-y: scroll;
}

可是滚动条太宽了,能够隐藏滚动条的那个条,再加一个css就能够了

ul::-webkit-scrollbar {
    display: none;
}

css控制鼠标移过元素显示小手

li:hover{
   cursor:pointer; 
}