HTML和CSS个人笔记

目录

• 定位
• 文字显示在图片上
• ul的li元素的小圆点换成图片
• 关于Bootstrap的响应式
  • 不要在container之外使用row
  • 不要使用padding的时候固定高度
  • 不要使用
    

    ---

  • p标签不换行
• 图片宽高超过尺寸图片重复
• 图片旋转
• 接入YouTube视频
• 图片默认图
• 文字太长显示...
• 响应式中布局尽量不要使用margin,padding,相对定位
• 滚动条的使用与隐藏
• 细化滚动条
• css控制鼠标移过元素显示小手
• 浏览器模拟手机的时候font-size变小无效
• a标签不要下划线
• 图片img没有时给一个默认图片
• 单选多选框,文字也能选择
• 垂直居中显示
• 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/Style/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

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