WebStudy-CSS学习2

最新推荐文章于 2024-04-05 09:30:07 发布

Floatwor青舟

最新推荐文章于 2024-04-05 09:30:07 发布

阅读量638

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/f944913628/article/details/107523959

版权

前端学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

近日学习小结

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

huya小模块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

huya小模块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小模块

未完待续…

练习中的小结

Floatwor青舟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebStudy-CSS学习2

目录近日学习小结盒模型近日练习的小模块代码虎牙小模块1虎牙小模块2bilibili小模块练习中的小结近日学习小结html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dd>、<dl>、<dt>、<table>、<address>、<bloc
复制链接

扫一扫

专栏目录