近日学习小结

html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dd>、<dl>、<dt>、<table>、<address>、<blockquote> 、<form>、<del>、<ins>、<fieldset>、<legend>、<button>、<hr>、<map>、<object>

块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<code>、<input>、<select>、<small>、<big>、<addr>、<img>、<acronym>
<b>、<sub>、<sup>

内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联元素之间有间隔，内联元素是当做字体来处理的，字体之间是有间隔的，所以内联元素之间也是有间隔的

常用的内联块状元素有：

<img>、<input>

summary：
1.如何分辨元素是什么类型？(块级内联内联块级)
同时将某个元素写两遍即可。
总结: 块级可以任意设置宽高边框属性
内联的宽高取决于内容的宽高，手动设置无法显示
2.内联和块级如何进行转换工作？
display:block(设置为块级)/inline(设置为内联)/inline-block（内联块级）
css的三种写法：
1.页面内部写style然后写样式
2.在标签内部的开始标签书写样式
3.外部引入(最常见的)

盒模型

原理：
内容(content),填充(padding),边框(border),边界(margin)，CSS盒子模式都具备这些属性
特点：
1、每个盒子都有边界，边框，填充，内容四个属性
2、每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；填充可以理解为盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。

宽度:左边距+左边框+左填充 +内容+右填充+右边框+右边距

盒子的移动我们需要这样设置:
移动距离顶部多少个像素 margin-top
移动距离左边界多少个像素 margin-left

为什么要学习盒模型？
主要是为了解决元素在页面上位置的移动和摆放

如何让块级元素排列一行？
使用浮动属性 float:left/right
清除浮:clear:both/left/right

近日练习的小模块代码

虎牙小模块1

html：

<body><!--1.先写最大的带有背景的框--><div id="hot-game">   <!--2.这是一个将所有内容包括的框--><div class="commend_warp"><!--3.开始划分左右两个框的位置--><!--div.recomend_box+div.star_box  按tab键--><!--4.这是左边的热门游戏盒子--><div class="recomend_box float_left"><!--6.这是左侧里面上半部分内容--><div class="box_hd"><ul><li class="float_left"  ><div><img src="pc01.png" alt=""></div></li><li class="float_left font">热门分类</li><li class="float_left c1"><div class="float_left cc1" >网游竞技</div><div class="float_left cc1">单机热游</div><div class="float_left cc1" >娱乐天地</div><div class="float_left cc1" >手游休闲</div></li><li class="float_right " ><span>更多</span>＞</li><li class="float_right">当前共有<strong>511</strong>场直播</li></ul></div><!--7.这是左侧里面下半部分内容--><div class="box_bd"><ul><li class="float_left"><a href="" title="英雄联盟"><div><img src="1-MS.png" alt="" /></div><p><span>英雄联盟</span></p><p>1118场直播</p></a></li><li class="float_left" ><a href="" title="王者荣耀"><div><img src="2-MS.png" alt="" /></div><p><span>王者荣耀</span></p><p>2577场直播</p></a></li><li class="float_left"><a href="" title="一起看"><div><img src="3-MS.png" alt="" /></div><p><span>一起看</span></p><p>321场直播</p></a></li><li class="float_left"><a href="" title="星秀"><div><img src="4-MS.png" alt="" /></div><p><span>星秀</span></p><p>1128场直播</p></a></li>                       <li class="float_left"><a href="" title="户外"><div><img src="5-MS.png" alt="" /></div><p><span>户外</span></p><p>432场直播</p></a></li>                      <li class="float_left"><a href="" title="和平精英"><div><img src="6-MS.png" alt="" /></div><p><span>和平精英</span></p><p>992场直播</p></a></li>                          <li class="float_left"><a href="" title="绝地求生"><div><img src="7-MS.png" alt="" /></div><p><span>绝地求生</span></p><p>578场直播</p></a></li>                          <li class="float_left"><a href="" title="lol云顶之弈"><div><img src="8-MS.png" alt="" /></div><p><span>lol云顶之弈</span></p><p>343场直播</p></a></li>                            <li class="float_left"><a href="" title="二次元"><div><img src="9-MS.png" alt="" /></div><p><span>二次元</span></p><p>634场直播</p></a></li>                            <li class="float_left"><a href="" title="穿越火线"><div><img src="10-MS.png" alt="" /></div><p><span>穿越火线</span></p><p>243场直播</p></a></li>                         <li class="float_left"><a href="" title="主机游戏"><div><img src="11-MS.png" alt="" /></div><p><span>主机游戏</span></p><p>898场直播</p></a></li>                         <li class="float_left"><a href="" title="DNF手游"><div><img src="12-MS.png" alt="" /></div><p><span>DNF手游</span></p><p>257场直播</p></a></li></ul></div></div><div class="star_box float_right"><!--5.这是右边明星盒子上半部分--><div class="star_tbox float_right"><ul><li class="float_left"> <div><img src="pc02.png" alt=""></div></li><li class="float_left font">明星大神</li><li class="float_right " ><span>成为主播</span>＞</li></ul></div><!-- 这是右边明星盒子下半部分 --><div class="star_bbox float_right"><ul><li><a href="" title="炉石传说一哥"><div class="l_div"><img src="bc01.jpg" alt=""><div class="dongtai_icon live_icon"></div></div><div class="r_div"><h3>安德罗妮</h3><div class="star_info" title="炉石传说一哥，神狗协会会长，麾下十万军师">炉石传说一哥，神狗协会会长，麾下十万军师</div></div></a></li><li><a href="" title="和平精英人气主播"><div class="l_div"><img src="bc02.jpg" alt=""><div class="dongtai_icon live_icon"></div></div><div class="r_div"><h3>奇怪君</h3><div class="star_info" title="和平精英人人气主播，玩物励志高学历游戏天才少年">和平精英人人气主播，玩物励志高学历游戏天才少年</div></div></a></li><li><a href="" title="两届YSL冠军得主"><div class="l_div"><img src="bc03.jpg" alt=""><div class="dongtai_icon live_icon"></div></div><div class="r_div"><h3>董小飒</h3><div class="star_info" title="连续两届YSL冠军得主，年度最受欢迎男主播">连续两届YSL冠军得主，年度最受欢迎男主播</div></div></a></li><li><a href="" title="韦神"><div class="l_div"><img src="bc04.jpg" alt=""><div class="dongtai_icon live_icon"></div></div><div class="r_div"><h3>韦神</h3><div class="star_info" title="韦神，LPL冠军；绝地求生4AM战队核心">韦神，LPL冠军；绝地求生4AM战队核心</div></div></a></li><li><a href="" title="LOL第一女解说"><div class="l_div"><img src="bc05.jpg" alt=""><div class="dongtai_icon live_icon"></div></div><div class="r_div"><h3>MISS大小姐</h3><div class="star_info" title="中国LOL第一女解说">中国LOL第一女解说</div></div></a></li></ul></div></div></div></div>
</body>

css：

/*去掉整体body的margin*/
body,ul,a,p{margin: 0;padding: 0;list-style: none;text-decoration: none;font: 12px/1.5 Microsoft YaHei,Arial,Helvetica,sans-serif,SimSun;}.float_left{float: left;}.float_right{float: right;}/*这是热门游戏的大框*/#hot-game{width: 100%;height: 482px;;background: url(hybg.jpg);background-size: cover;}/*这是2的样式*/.commend_warp{width: 1220px;height: 420px;;margin: 30px auto 0px;}/*这是4的样式*/.recomend_box{width: 910px;height: 100%;}/*这是5的样式*/.star_box{width: 290px;height: 100%;}.star_tbox{width: 100%;height:35px;margin-bottom: 10px;}.star_bbox{width: 100%;height:370px;margin-left: 2px;}/*这是6的样式*/.box_hd{width: 100%;height: 35px;margin-bottom: 13px;}/*这是7的样式*/.box_bd{width: 100%;height:370px;margin-left: 2px;}.box_bd li{width: 135px;height: 167px;margin: 0 15px 12px 0;border-radius: 6px;background: white;}.box_bd a{width: 100%;height: 100%;display: block;}.box_bd div{width: 88px;height: 88px;margin: 17px auto 0px;}.box_bd img{width: 100%;height: 100%;}.box_bd p{text-align: center;margin: 4px 0 2px 0;}.box_bd p span{color: #333;}.box_bd p span:hover{color: #ff9f00;}.box_bd p:last-child{color: #999;}.box_hd li div{width: 32px; height: 32px;  margin: 1px 8px 0px 0px;}.box_hd img{width: 100%; height: 100%;}.box_hd .font{font-size: 26px;color: #fff;height: 33px;line-height: 33px;font-weight: 400;margin-right: 10px;}.box_hd .font:hover{color: #ff9f00; }.box_hd .c1 {padding: 0 0 0 15px;margin-top: 5px;height: 28px;overflow: hidden;width: 387px ;;}.box_hd .c1 .cc1{padding: 0 15px;border: 1px solid #e2e2e2; border-radius: 15px;background: hsla(0,0%,100%,.8);height: 26px;line-height: 26px;margin-right: 5px; width: 56px;text-align: center;color: #333;font-size: 14px;line-height: 26px;height: auto;}.box_hd .c1 .cc1:hover{background-color: white;color:#ff9f00 !important ;cursor: pointer;border:#ff9f00 1px solid ;}.box_hd .float_right{height: 32px;padding: 10px 3px 0 4px; margin-left: 4px;line-height: 16px;font-size: 14px;color: hsla(0,0%,100%,.7);margin-right: 6px;cursor: pointer;}.box_hd .float_right span:hover{color:#ff9f00 ;}
.box_hd .float_right strong{color: #ff9f00;padding: 0 5px; font-weight: 400;
}
.star_tbox li div{width: 32px; height: 32px;  margin: 1px 8px 0px 0px;
}
.star_tbox img{ width: 100%; height: 100%;}
.star_tbox .font{font-size: 26px;color: #fff;height: 33px;line-height: 33px;font-weight: 400;margin-right: 10px;
}
.star_tbox .font:hover{color: #ff9f00; }
.star_tbox .float_right{height: 32px;padding: 10px 3px 0 4px; margin-left: 4px;line-height: 16px;font-size: 14px;color: hsla(0,0%,100%,.7);margin-right: 6px;cursor: pointer;}.star_tbox .float_right span:hover{color:#ff9f00 ;}
.star_bbox{background: #fff;height: 345px;border-radius: 6px;overflow: scroll;
}
.star_bbox li{width: 260px;margin-top: 6px;padding: 5px; height: 75px;border-radius: 10px;overflow: hidden;transition: color .2s ease-out;
}
.star_bbox a{display: inline-block;width: 100%;height: 100%;cursor: pointer;border-radius: 6px;
}
.star_bbox .l_div{width: 64px; height: 64px; float: left;position: relative;
}
.l_div img{width: 100%; height: 100%;border-radius: 50%;
}.dongtai_icon{width: 20px;height: 20px;border: 1px solid red;margin: 66% 0px 0px 66%;border-radius: 100%;position: absolute;top: 0;}
.live_icon{background:#EA472C url(https://a.msstatic.com/huya/main3/widget/index-star-box/icon_live_eb974.png);/* webkit-animation: isLiving .6s steps(6) infinite; */animation: isLiving .6s steps(6) infinite;}@keyframes isLiving {0%  {background-position:0 0}to {background-position:-108px 0}}
.star_bbox a:hover h3{color: orange;}
.star_bbox a:hover{cursor: pointer;background: #e3e3e3;}   .star_bbox .r_div{width: 162px; height: 62px;padding: 2px 11px 0 7px; line-height: 14px; overflow: hidden; display: block;float: left;margin-left: 7px;}
.r_div h3{margin:2px 0 0 0;line-height: 20px;color: #333;font-size: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.r_div h3:hover{ transition:color .2s ease-out;color:#f80}
.r_div .star_info{margin-top: 4px;height: 36px;overflow: hidden;color: #999;font-size: 12px;line-height: 18px;
}

虎牙小模块2

html：

 <body><!--这是最大的框--><div class="footer_box"><!--这是中间的内容的大框--> <div class="huya-footer_hd"><dl class="huya_foot_friend float_left"><dt>友情链接</dt><dd><a href="">腾讯游戏频道</a></dd><dd><a href="">快看漫画</a></dd><dd><a href="">全球电竞网</a></dd><dd><a href="">凤凰游戏电竞</a></dd><dd><a href="">腾讯游戏频道</a></dd><dd><a href="">快看漫画</a></dd><dd><a href="">全球电竞网</a></dd><dd><a href="">凤凰游戏电竞</a></dd><dd><a href="">腾讯游戏频道</a></dd></dl><dl class="huya_foot_help float_left"><dt>主播帮助</dt><dd><a href="">新人主播指引</a></dd><dd><a href="">开播工具下载</a></dd><dd><a href="">开播教程引导</a></dd><dd><a href="">虎牙直播学院</a></dd></dl>    </dl><div class="huya_foot_prod float_left"><h2>虎牙产品下载</h2><div class="yahu_app_qrcode float_left"><img src="hyfootpc01.jpg" alt="" /><p>扫描下载虎牙APP</p></div><div class="yahu_foot_prod_list float_left"><a href=""><i style="background: url(https://a.msstatic.com/huya/main3/common/assets/img/footer/iphone_464a4.png) no-repeat;"></i><span>iPhone版</span></a><a href=""><i style="background: url(https://a.msstatic.com/huya/main3/common/assets/img/footer/ipad_7a5e8.png) no-repeat;"></i><span>iPad版</span></a><a href=""><i style="background: url(https://a.msstatic.com/huya/main3/common/assets/img/footer/andriod_2c386.png) no-repeat;"></i><span>Android版</span></a><a href=""><i style="background: url(https://a.msstatic.com/huya/main3/common/assets/img/footer/pad_31c07.png) no-repeat;"></i><span>Adroid Pad</span></a><a href=""><i style="background: url(https://a.msstatic.com/huya/main3/common/assets/img/footer/tv_2e8ab.png) no-repeat;"></i><span>TV版</span></a><a href=""><i style="background: url(https://a.msstatic.com/huya/main3/common/assets/img/footer/pc_d070b.png) no-repeat;"></i><span>PC版</span></a><a href=""><i style="background: url(https://a.msstatic.com/huya/main3/common/assets/img/footer/wp_18e87.png) no-repeat;"></i><span>Win10版/WP版</span></a></div></div><div class="huya_foot_other float_right"><h2>关注我们</h2><div class="hypub_number float_left"><img src="hyfootpc02.jpg" alt="" /><p>扫描关注微信公众号</p></div><div class="huya_foot_other_list float_left"><a href=""><i style="background: url(https://a.msstatic.com/huya/main3/common/assets/img/footer/sina_3536f.png) no-repeat;"></i><span>虎牙官方微博</span></a><a href=""><i style="background: url(https://a.msstatic.com/huya/main3/common/assets/img/footer/qieba_65493.png) no-repeat;"></i><span>贴吧交流</span></a><a href="">不良信息投诉与举报</a></div></div></div></div>
</body>

css:

  body,dl,a,dd,h2{margin: 0;font: 12px/1.5 Microsoft YaHei,Arial,Helvetica,sans-serif,SimSun;text-decoration: none;}         .float_left{float: left;}   .float_right{float: right;}     .footer_box{width: 100%;height: 250px;background: white;text-align: left;position: relative;}   .footer_box a{color: #7e7e7e;line-height: 20px;}.footer_box dd{margin-bottom: 8px;}.footer_box a:hover{color: orange;}p{white-space: nowrap;color: #7e7e7e;line-height: 20px;margin: 0;padding: 0;position: absolute;bottom: 1px;}/* 0 */.huya-footer_hd{width: 1220px;height: 170px;margin: 40px auto;}/*1*/.huya_foot_friend{width: 230px;height: 170px;}.huya_foot_friend dt{font-size: 14px;overflow-x: hidden;margin-bottom: 10px;font-weight: 800;}.huya_foot_friend dd{width: 110px;float: left;} /*2*/.huya_foot_help{width: 170px;height: 142px;margin-left: 80px;}dt{font-size: 14px;overflow-x: hidden;margin-bottom: 10px;font-weight: 800;line-height: 20px;color: #7e7e7e;}.huya_foot_help dd{width: 115px;float: left;}/*3*/.huya_foot_prod{width: 400px;height: 170px;margin-left:40px;}h2{font-size: 14px;overflow-x: hidden;margin-bottom: 13px;font-weight: 800;line-height: 20px;color: #7e7e7e;}.yahu_app_qrcode{width: 110px;height: 120px;margin-right: 20px;position: relative;}.yahu_app_qrcode img{width: 98px;height: 98px;margin-bottom: 3px;}.yahu_foot_prod_list{width: 240px;height: 136px;position: relative;}.yahu_foot_prod_list a{width: 120px;height: 24px;display: block;float: left;margin-bottom: 10px;}.yahu_foot_prod_list i{width: 24px;height: 24px;display:block;float: left;}.yahu_foot_prod_list span{margin:4px 0  0 5px;display: block;float: left;}/*4*/.huya_foot_other{width: 240px;height: 150px;}.hypub_number{width: 110px;height: 120px;margin-right: 20px;position: relative;}.hypub_number img{width: 98px;height: 98px;margin-bottom: 3px;}.huya_foot_other_list{width: 108px;height: 102px;position: relative;}.huya_foot_other_list a{width: 108px;height: 24px;display: block;float: left;margin-bottom: 10px;}.huya_foot_other_list i{width: 24px;height: 24px;display:block;float: left;}.huya_foot_other_list span{margin:4px 0  0 5px;display: block;float: left;}

bilibili小模块

未完待续…

练习中的小结

WebStudy-CSS学习2相关推荐

CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
11个实用的CSS学习工具
为什么80%的码农都做不了架构师?>>> 1. 盒子模型的幻灯片通过3D转换效果产生的互动的幻灯片.按向左或向右箭头键切换,全屏观看会有更好的效果. 2. CSS Diner ...
CSS学习笔记-04 a标签-导航练习
个人练习,各位大神勿笑 .. <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
CSS学习之外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网 ...
div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中背景图片 ie6 ie7 margin 杂谈分类: 网页制作 1.IE6中用了float之后导致m ...

WebStudy-CSS学习2

目录