JSD-2204-HTML-CSS-Day03

最新推荐文章于 2024-06-28 23:13:58 发布

程序猿 Monkey

最新推荐文章于 2024-06-28 23:13:58 发布

阅读量282

点赞数

本文链接：https://blog.csdn.net/TheNewSystrm/article/details/125527996

版权

1.css

1.1CSS三大特性

继承: 指元素可以继承上级元素文本和字体相关的样式,部分标签自带效果不受继承影响,比如超链接的字体颜色
层叠: 多个选择器可以选择到同一个元素, 如果作用的样式不同,层叠性指的是可以将多个不同的样式层叠到一起显示, 如果作用的样式相同则由优先级决定哪个生效.
优先级: 指选择器的优先级, 作用范围越小优先级会越高,
!important>id选择器>class选择器>标签名选择器>继承(间接选中)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1{
      color: red;
    }
    div{
      color: green;
    }
    /*!important 提升样式的优先级为最高 */
    p{color: blue !important;}
    #p1{color: yellow }
  </style>
</head>
<body>
<div id="d1">
  <p id="p1">这是个p标签</p>
  <span>这是一个span</span>
  <div><p>这个p是孙子元素</p></div>
  <a href="">超链接</a>
</div>
</body>
</html>

1.2居中相关内容

如果元素是块级元素,让元素自身居中使用margin:0 auto,如果让元素内容居中则使用text-align:center
如果元素是行内块元素, 让元素自身居中需要给上级添加text-align:center , 内容居中也是text-align:center;
如果元素是行内元素,让元素自身居中需要给上级添加text-align:center ,内容居中(不存在)

1.2.1综合练习1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      font: 12px "simhei", Arial, Helvetica, sans-serif;
      color: #666;
    }
    body>div{
      width: 611px;
      height: 376px;
      background-color: #e8e8e8;
      background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
      background-size: 318px 319px;
      background-repeat: no-repeat;
      background-position: 90% 90%;
      overflow: hidden;
    }
    div>div{
      width: 245px;
      height: 232px;
      margin: 68px 0 0 36px;
    }
    .title_p{
      font-size: 32px;
      color: #333;
      margin-bottom: 12px;
    }
    .price_p{
      font-size: 24px;
      color: #0aa1ed;
      font-weight: bold;
      margin-bottom: 12px;
    }
    a{
      background-color: #0aa1ed;
      width: 132px;
      height: 40px;
      display: block;
      text-align: center;
      line-height: 40px;
      font-size: 20px;
      color: white;
      text-decoration: none;
      border-radius: 3px;
    }


  </style>
</head>
<body>
<div>
  <div>
    <p class="title_p">灵越 燃7000系列</p>
    <p class="intro_p">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
      英特尔HD显卡620含共享显卡内存</p>
    <p class="price_p">￥4999.00</p>
    <a href="">查看详情</a>
  </div>
</div>
</body>
</html>

1.2.2综合练习2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      font: 12px "simhei", Arial, Helvetica, sans-serif;
      color: #666;
    }
    body>div{
      width: 375px;
      height: 376px;
      background-color: #e8e8e8;
      background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img2.png");
      background-size: 292px 232px;
      background-repeat: no-repeat;
      background-position: 90% 90%;
      overflow: hidden;
    }
    div>div{
      width: 252px;
      height: 232px;
      margin: 39px 0 0 25px;
    }
    .title_p{
      font-size: 32px;
      color: #333333;
      margin-bottom: 12px;
    }
    .price_p{
      font-size: 24px;
      color: #0aa1ed;
      margin-bottom: 12px;
      font-weight: bold;
    }
    a{
      background-color: #0aa1ed;
      width: 132px;
      height: 40px;
      color: white;
      text-align: center;
      line-height: 40px;
      display: block;
      font-size: 20px;
      text-decoration: none;
      border-radius: 3px;
    }


  </style>
</head>
<body>
<div>
  <div>
    <p class="title_p">颜值 框不住</p>
    <p>酷睿双核i5处理器|256GB SSD| 8GB内存<br>
      英特尔HD显卡620含共享显卡内存</p>
    <p class="price_p">￥6888.00</p>
    <a href="">查看详情</a>
  </div>
</div>
</body>
</html>

1.2.3综合练习3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      font: 12px "simhei", Arial, Helvetica, sans-serif;
      color: #666;
    }
    body>div{
      width: 198px ;
      height: 233px;
      background-color: #e8e8e8;
      text-align: center;
    }
    .title_p{
      margin-top: 0;
      color: #000;
      margin-bottom: 6px;
    }
    .price_p{
      margin: 6px 0;
      color: #0aa1ed;
      font-weight: bold;
    }
    a{

        display: inline-block;
        background-color: #0aa1ed;
        width: 100px;
        height: 24px;
        /*上下0 左右auto(居中),
        让块级元素的文本内容居中使用text-align:center;
        让块级元素自身在所在行内居中使用margin:0 auto*/
        /*margin: 0 auto;*/
        text-decoration: none;
        color: white;
        line-height: 24px;
        border-radius: 3px;
    }


  </style>
</head>
<body>
<div>
  <img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img3.png" alt="">
  <p class="title_p">戴尔(DELL)XPS13-9360-R1609 13.3英寸微边框笔记本电脑</p>
  <p class="price_p">￥4600.00</p>
  <a href="">查看详情</a>
</div>
</body>
</html>

1.3定位方式

共五种定位方式:
- 静态定位
- 相对定位
- 绝对定位
- 固定定位
- 浮动定位

1.4定位方式之静态定位

默认的定位方式,也叫作文档流定位
格式: position:static
特点: 元素以左上为基准 , 块级元素从上往下依次排列, 行内元素从左向右依次排列
通过外边距控制元素的位置
无法实现元素层叠显示

1.5定位方式之相对定位

格式: position: relative;
特点: 元素不脱离文档流(不管元素显示到什么位置都占着原来的位置)
通过left/right/top/bottom相对于元素的初始位置做偏移
相对定位可以实现元素层叠效果
应用场景: 当需要移动某一个元素,而且其它元素不受影响时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{width: 100px;height: 100px;border: 1px solid red}
    div:hover{
      /*margin: 20px 0 0 20px;*/
      /*修改定位方式为相对定位*/
      position: relative;
      top: 20px;
      left: 20px;
    }
  </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>

1.6定位方式之绝对定位

格式: position:absolute;
特点: 元素脱离文档流(不占原来的位置,后面的元素会顶上来)
通过left/right/top/bttom相对于窗口或某一个上级元素做位置偏移
应用场景:需要层叠显示并且元素不需要占原来的位置
相对定位和绝对定位区别:
- 相对定位不脱离文档流(占位置) 绝对定位脱离文档流不占位置
- 相对定位参照物是原来位置, 绝对定位参照物是窗口(默认)或某一个上级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{width: 100px;height: 100px;border: 1px solid red}
    #d1{
      /*设置为绝对定位,元素脱离文档流*/
      position: absolute;
      /*相对于窗口做位置偏移*/
      right: 20px;
      bottom: 50px;
    }
  #big{
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 100px 0 0 100px;

  }
  #big>div{
    width: 100px;
    height: 100px;
    background-color: green;
    margin: 50px 0 0 50px;
    /*如果想让绝对定位的元素位置偏移 以某个元素做参照物需要给元素添加相对定位*/
    position: relative;/*做参照物*/
  }
  #big>div>div{
    width: 50px;
    height: 50px;
    background-color: blue;
    position: absolute;
    left: 0;
    top: 0;

  }


  </style>
</head>
<body>
<div id="big">
  <div>
    <div></div>
  </div>
</div>
<div id="d1">div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>

1.6.1绝对定位练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body>div{
      width: 300px;
      background-color: rgba(0,0,0,0.3);
      padding: 10px;/*内容缩进10个像素*/
      position: relative;/*做参照物*/
    }
    input{
      width: 260px; /*300-40=260*/
      border: 0;/*去掉自带边框*/
      padding: 10px 20px;/**/
    }
    img{
      position: absolute;
      right: 40px;
      top: 14px;
    }
    p{
      font-size: 12px;
      color: red;
      margin: 0;
    }
  </style>
</head>
<body>
<div>
  <input type="text">
  <img src="http://doc.canglaoshi.org/tstore_v1/images/login/yhm.png" alt="">
  <p>用户名不能为空!</p>
</div>
</body>
</html>

1.7定位方式之固定定位

格式: position:fixed;
特点: 元素脱离文档流, 元素固定在窗口的某个位置不随内容位置的移动而移动.
通过left/right/top/bottom相对于窗口做位置偏移

1.8position定位回顾:

静态定位: static(默认) 无法层叠显示, 元素以左上为基准, 通过外边距
相对定位: relative 不脱离文档流, 通过left/right/top/bottom相对于初始位置做偏移
绝对定位: absolute 脱离文档流,通过left/right/top/bottom相对窗口或某一个上级元素
固定定位: fixed 脱离文档流, 通过left/right/top/bottom相对窗口做位置偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1{
      width: 1000px;
      height: 100px;
      background-color: red;
      /*设置固定定位*/
      position: fixed;
      top: 0;
    }
    body{
      padding-top: 100px;/*避免内容被盖上*/
    }
    #d2{
      width: 50px;
      height: 200px;
      background-color: blue;
      position: fixed;
      right: 20px;
      bottom: 50px;
    }
  </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
<img src="../b.jpg" alt="">
</body>
</html>

1.9浮动定位

格式: float:left/right;
特点: 元素脱离文档流,从当前所在行向左或向右浮动,当撞到上级元素边缘或其它浮动元素时停止
一行装不下时会自动折行,折行时有可能被卡主
如果某个元素的所有子元素全部浮动,则自动识别的高度为0, 后面的元素会顶上来(如果被盖的内容有文字,文字会被挤出来) 最终可能导致显示异常, 给元素添加overflow:hidden可以解决此问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body>div{
      width: 200px;
      border: 1px solid red;
      overflow: hidden;/*解决高度识别为0,带来的显示异常*/
    }
    #d1{
      width: 50px;height: 50px;
      background-color: red;
      float: left;
    }
    #d2{
      width: 50px;height: 50px;
      background-color: green;
      float: left;
    }
    #d3{
      width: 50px;height: 50px;
      background-color: blue;
      float: left;
    }
    #d4{
      width: 300px;
      height: 300px;
    }
    ul{
      list-style-type: none;/*去掉列表图标*/
      overflow: hidden; /*解决子元素全部浮动 自动识别高度为0 的问题*/
    }
    li{
      float: left;
      margin-right: 20px;
    }
  </style>
</head>
<body>
<ul>
  <li><a href="">首页</a></li>
  <li><a href="">免费课</a></li>
  <li><a href="">直播课</a></li>
  <li><a href="">精品课</a></li>
  <li><a href="">线上班</a></li>
</ul>
<div>
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
</div>
<div id="d4">我是粉色的</div>
</body>
</html>

1.9.1综合练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				
			}
			body{
				font: 12px "simhei", Arial, Helvetica, sans-serif;
				color: #666;
			}
			#div01{
				width: 366px;
				height: 233px;
				background-color: #E8E8E8;
			}
			#top_div{
				width: 366px;
				height: 35px;
				background-color: #0AA1ED;
				line-height: 35px;
			}
			span{
				
				margin: 0 9px 0 0 ;
				font-size: 16px;
				color: #FFFFFF;
				line-height: 35px;
			}
			img{
				margin-top: 5px;
				margin-left: 5px;
				float: left;
			}
			ul{
				list-style: none;
				overflow: hidden;
				padding: 0px;
			}
			li{
				float: left;
				margin-left: 10px;
				margin-bottom: 10px;
				
			}
			.c_div{
				width: 366px;
				color: #0AA1ED;
				font-size: 12px;
			}
			.c_div>p{
				margin-left: 10px;
			}
			li>a{
				color: #0AA1ED;
				text-decoration: dashed;
			}
		</style>
	</head>
	<body>
		<div id="div01">
			<div id="top_div"><img src="computer_icon1.png" alt=""><span>&nbsp;&nbsp;电脑,办公/1F</span></div>
			<div class="c_div">
				<p>电脑壁纸</p>
				<ul>
					
					<li><a href="">笔记本</a></li>
					<li><a href="">游戏机</a></li>
					<li><a href="">台式机</a></li>
					<li><a href="">一体机</a></li>
					<li><a href="">服务器</a></li>
					<li><a href="">联想</a></li>
				</ul>
			</div>
			<div class="c_div">
				<p>电脑配件</p>
				<ul>
					
					<li><a href="">CPU</a></li>
					<li><a href="">SSD硬盘</a></li>
					<li><a href="">显示器</a></li>
					<li><a href="">显卡</a></li>
					<li><a href="">组装电脑</a></li>
					<li><a href="">机箱</a></li>
				</ul>
			</div>
			<div class="c_div">
				<p>外设/游戏</p>
				<ul>
					
					<li><a href="">键盘</a></li>
					<li><a href="">鼠标</a></li>
					<li><a href="">U盘</a></li>
					<li><a href="">移动硬盘</a></li>
					<li><a href="">游戏设备</a></li>
					<li><a href="">智能单车</a></li>
				</ul>
			</div>
		</div>
		
	</body>
</html>

1.10将上述综合练习进行总结

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				font: 12px "simhei", Arial, Helvetica, sans-serif;
				color: #666;
			}
			*{}
			#wai{
				float: left;
				
				width: 611px;
				height: 376px;
				background-color: #e8e8e8;
				background-image: url(study_computer_img1.png);
				background-repeat: no-repeat;
				background-size: 318px 319px;
				background-position: 90% 90%;
				overflow: hidden;
			}
			#nei{
				width: 255px;
				height: 242;
				padding:5px;
				margin-top: 68px;
				margin-left: 36px;
			}
			#wai1{
				margin-left: 10px;
				float: left;
				display: inline-block;
				width: 375px;
				height: 376px;
				background-color: #e8e8e8;
				background-image: url(study_computer_img2.png);
				background-repeat: no-repeat;
				background-size: 292px 232px;
				background-position: 85% 90%;
				overflow: hidden;
			}
			#nei1{
				width: 261px;
				height: 240px;
				padding:5px;
				margin-top: 39px;
				margin-left: 25px;
			}
			.title_P{
				margin-top: 0;
				color: #333333;
				font-size: 32px;
				margin-bottom: 12px;
				font-weight: lighter;
			}
			.intro_p{
				margin-bottom: 24px;
				font-size: 12px;
				font-weight: lighter;
			}
			.price_p{
				margin-bottom: 12px;
				font-weight: bold;
				color: #0AA1ED;
				font-size: 24px;
			}
			.a1{
				display: block;
				width: 132px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background-color: #0AA1ED;
				font-size: 20px;
				color: white;
				text-decoration: dashed;
				border-radius: 3px;
			}
			#bigdiv{
				overflow: hidden;
				width: 1000px;
				height: 376px;
			}
			#div01{
				float: left;
				width: 366px;
				height: 233px;
				background-color: #E8E8E8;
			}
			#top_div{
				width: 366px;
				height: 35px;
				background-color: #0AA1ED;
				line-height: 35px;
			}
			span{
				
				margin: 0 9px 0 0 ;
				font-size: 16px;
				color: #FFFFFF;
				line-height: 35px;
			}
			img{
				margin-top: 5px;
				margin-left: 5px;
				float: left;
			}
			ul{
				list-style: none;
				overflow: hidden;
				padding: 0px;
			}
			li{
				float: left;
				margin-left: 10px;
				margin-bottom: 10px;
				
			}
			.c_div{
				width: 366px;
				color: #0AA1ED;
				font-size: 12px;
			}
			.c_div>p{
				margin-left: 10px;
			}
			li>a{
				color: #0AA1ED;
				text-decoration: dashed;
			}
			.d1{
				float: left;
				width: 198px;
				height: 233px;
				text-align: center;
				background-color: #e8e8e8;
				margin-left: 12px;
			}
			.intro_p1{
				margin-top: 0;
				color: #000000;
				margin-bottom: 6px;
			}
			.price_p1{
				margin-top: 0;
				margin-bottom: 6px;
				font-size: 12px;
				font-weight: bold;
				color: #0AA1ED;
			}
			.a2{
				display: block;
				width: 100px;
				height: 24px;
				color: white;
				background-color: #0AA1ED;
				margin: 0 auto;
				line-height: 24px;
				text-decoration: solid;
				border-radius: 3px;
			}
			#bigdiv1{
				margin-top: 10px;
				width: 1000px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="bigdiv">
			<div id="wai">
				<div id="nei">
					<p class="title_P">灵越 燃7000系列</p>
					<p class="intro_p">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
						英特尔HD显卡620含共享显卡内存</p>
					<p class="price_p">￥4999.00</p>
					<a href="" class="a1">查看详情</a>
				</div>
			</div>
			<div id="wai1">
				<div id="nei1">
					<p class="title_P">颜值 框不住</p>
					<p class="intro_p">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
						英特尔HD显卡620含共享显卡内存</p>
					<p class="price_p">￥6888.00</p>
					<a href="" class="a1">查看详情</a>
				</div>
			</div>
		</div>
		
		<div id="bigdiv1">
			<div id="div01">
				<div id="top_div"><img src="computer_icon1.png" alt=""><span>&nbsp;&nbsp;电脑,办公/1F</span></div>
				<div class="c_div">
					<p>电脑壁纸</p>
					<ul>
						
						<li><a href="">笔记本</a></li>
						<li><a href="">游戏机</a></li>
						<li><a href="">台式机</a></li>
						<li><a href="">一体机</a></li>
						<li><a href="">服务器</a></li>
						<li><a href="">联想</a></li>
					</ul>
				</div>
				<div class="c_div">
					<p>电脑配件</p>
					<ul>
						
						<li><a href="">CPU</a></li>
						<li><a href="">SSD硬盘</a></li>
						<li><a href="">显示器</a></li>
						<li><a href="">显卡</a></li>
						<li><a href="">组装电脑</a></li>
						<li><a href="">机箱</a></li>
					</ul>
				</div>
				<div class="c_div">
					<p>外设/游戏</p>
					<ul>
						
						<li><a href="">键盘</a></li>
						<li><a href="">鼠标</a></li>
						<li><a href="">U盘</a></li>
						<li><a href="">移动硬盘</a></li>
						<li><a href="">游戏设备</a></li>
						<li><a href="">智能单车</a></li>
					</ul>
				</div>
			</div>
			<div class="d1">
				<img src="study_computer_img3.png" alt="" width="198px" height="136px">
				<p class="intro_p1">戴尔(DELL)XPS13-9360-R1609 13.3英
				<br>寸微边框笔记本电脑</p>
				<p class="price_p1">￥4600.00</p>
				<a href="" class="a2">查看详情</a>
			</div>
			<div class="d1">
				<img src="study_computer_img4.png" alt="" width="198px" height="136px">
				<p class="intro_p1">戴尔(DELL)XPS13-9360-R1609 13.3英
				<br>寸微边框笔记本电脑</p>
				<p class="price_p1">￥4600.00</p>
				<a href="" class="a2">查看详情</a>
			</div>
			<div class="d1">
				<img src="study_computer_img5.png" alt="" width="198px" height="136px">
				<p class="intro_p1">戴尔(DELL)XPS13-9360-R1609 13.3英
				<br>寸微边框笔记本电脑</p>
				<p class="price_p1">￥4600.00</p>
				<a href="" class="a2">查看详情</a>
			</div>
		</div>
	</body>
</html>