HTML和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)}
也可以不要小圆点
list-style-type:none
关于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 <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;
}
细化滚动条
我的内容本来就很挤了,滚动条又太粗了,挤占空间,所以细化一下
.content-memory .panel ul {
height: 200px;
overflow-y: scroll;
}
.content-memory .panel ul::-webkit-scrollbar {
width: 5px;
height: 5px;
background: #c7c3ca;
}
.content-memory .panel ul::-webkit-scrollbar-thumb {
min-height: 2px;
border-radius: 10px;
background-color: #737371;
}
想要加上x轴的滚动就加上white-space: nowrap;
css控制鼠标移过元素显示小手
li:hover{
cursor:pointer;
}
浏览器模拟手机的时候font-size变小无效
自适应的网页，模拟手机查看的时候，发现字体还是大了，于是使用font-size设置的小一点，结果发现值为12px的时候，再往下就不起效果了，查了下，原因是谷歌认为小于12px的字体对于人眼观感不友好，所以12px以下都是一样的大小
解决方法有两种，可以使用rem这个单位，第二种是使用放缩
transform: scale(.8);
a标签不要下划线
.content ul > li > a:hover {
color: #1db0b8;
text-decoration: none;
}
图片img没有时给一个默认图片
<img src="@video.Picture" onerror="this.onerror='';this.src='/Themes/Style/img/video_no.jpg'" alt="video">
单选多选框,文字也能选择
单选的radio或者复选的CheckBox,点击文字要也能选择,这是对用户友好,必须这样做
<label>
<input type="radio" name="radiobutton" value="123" />测试
</label>
垂直居中显示
align-items: center;
display: flex;
css一写东西就缩进
我在VS里面写css,一改就缩进,贼恶心,关了就可以了,在工具,选项,CSS高级,关闭分层缩进即可
文字加阴影
首页的文字一般加个阴影
text-shadow: 1px 2px 9px #000;
一些不是块元素的标签不能使用text-align
比如一个span元素,不是块元素,我想使用text-align: right;但是不生效,只有块元素才可以生效,所以要改成块元素
display: block;
text-align: right;
解决border的重叠问题
margin-top: -1px;
margin-right: -1px;
