• JSD-2204-HTML-CSS-Day03

    1.css

    1.1CSS三大特性

    • 继承: 指元素可以继承上级元素文本和字体相关的样式,部分标签自带效果不受继承影响,比如超链接的字体颜色
    • 层叠: 多个选择器可以选择到同一个元素, 如果作用的样式不同,层叠性指的是可以将多个不同的样式层叠到一起显示, 如果作用的样式相同则由优先级决定哪个生效.
    • 优先级: 指选择器的优先级, 作用范围越小 优先级会越高,
    • !important>id选择器>class选择器>标签名选择器>继承(间接选中)
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.   <style>
    7.     #d1{
    8.       color: red;
    9.     }
    10.     div{
    11.       color: green;
    12.     }
    13.     /*!important 提升样式的优先级为最高 */
    14.     p{color: blue !important;}
    15.     #p1{color: yellow }
    16.   </style>
    17. </head>
    18. <body>
    19. <div id="d1">
    20.   <p id="p1">这是个p标签</p>
    21.   <span>这是一个span</span>
    22.   <div><p>这个p是孙子元素</p></div>
    23.   <a href="">超链接</a>
    24. </div>
    25. </body>
    26. </html>

    1.2居中相关内容

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

    1.2.1综合练习1 

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.   <style>
    7.     body{
    8.       font: 12px "simhei", Arial, Helvetica, sans-serif;
    9.       color: #666;
    10.     }
    11.     body>div{
    12.       width: 611px;
    13.       height: 376px;
    14.       background-color: #e8e8e8;
    15.       background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
    16.       background-size: 318px 319px;
    17.       background-repeat: no-repeat;
    18.       background-position: 90% 90%;
    19.       overflow: hidden;
    20.     }
    21.     div>div{
    22.       width: 245px;
    23.       height: 232px;
    24.       margin: 68px 0 0 36px;
    25.     }
    26.     .title_p{
    27.       font-size: 32px;
    28.       color: #333;
    29.       margin-bottom: 12px;
    30.     }
    31.     .price_p{
    32.       font-size: 24px;
    33.       color: #0aa1ed;
    34.       font-weight: bold;
    35.       margin-bottom: 12px;
    36.     }
    37.     a{
    38.       background-color: #0aa1ed;
    39.       width: 132px;
    40.       height: 40px;
    41.       display: block;
    42.       text-align: center;
    43.       line-height: 40px;
    44.       font-size: 20px;
    45.       color: white;
    46.       text-decoration: none;
    47.       border-radius: 3px;
    48.     }
    49.  
    50.  
    51.   </style>
    52. </head>
    53. <body>
    54. <div>
    55.   <div>
    56.     <p class="title_p">灵越 燃7000系列</p>
    57.     <p class="intro_p">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
    58.       英特尔HD显卡620含共享显卡内存</p>
    59.     <p class="price_p">￥4999.00</p>
    60.     <a href="">查看详情</a>
    61.   </div>
    62. </div>
    63. </body>
    64. </html>

    1.2.2综合练习2

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.   <style>
    7.     body{
    8.       font: 12px "simhei", Arial, Helvetica, sans-serif;
    9.       color: #666;
    10.     }
    11.     body>div{
    12.       width: 375px;
    13.       height: 376px;
    14.       background-color: #e8e8e8;
    15.       background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img2.png");
    16.       background-size: 292px 232px;
    17.       background-repeat: no-repeat;
    18.       background-position: 90% 90%;
    19.       overflow: hidden;
    20.     }
    21.     div>div{
    22.       width: 252px;
    23.       height: 232px;
    24.       margin: 39px 0 0 25px;
    25.     }
    26.     .title_p{
    27.       font-size: 32px;
    28.       color: #333333;
    29.       margin-bottom: 12px;
    30.     }
    31.     .price_p{
    32.       font-size: 24px;
    33.       color: #0aa1ed;
    34.       margin-bottom: 12px;
    35.       font-weight: bold;
    36.     }
    37.     a{
    38.       background-color: #0aa1ed;
    39.       width: 132px;
    40.       height: 40px;
    41.       color: white;
    42.       text-align: center;
    43.       line-height: 40px;
    44.       display: block;
    45.       font-size: 20px;
    46.       text-decoration: none;
    47.       border-radius: 3px;
    48.     }
    49.  
    50.  
    51.   </style>
    52. </head>
    53. <body>
    54. <div>
    55.   <div>
    56.     <p class="title_p">颜值 框不住</p>
    57.     <p>酷睿双核i5处理器|256GB SSD| 8GB内存<br>
    58.       英特尔HD显卡620含共享显卡内存</p>
    59.     <p class="price_p">￥6888.00</p>
    60.     <a href="">查看详情</a>
    61.   </div>
    62. </div>
    63. </body>
    64. </html>

    1.2.3综合练习3 

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.   <style>
    7.     body{
    8.       font: 12px "simhei", Arial, Helvetica, sans-serif;
    9.       color: #666;
    10.     }
    11.     body>div{
    12.       width: 198px ;
    13.       height: 233px;
    14.       background-color: #e8e8e8;
    15.       text-align: center;
    16.     }
    17.     .title_p{
    18.       margin-top: 0;
    19.       color: #000;
    20.       margin-bottom: 6px;
    21.     }
    22.     .price_p{
    23.       margin: 6px 0;
    24.       color: #0aa1ed;
    25.       font-weight: bold;
    26.     }
    27.     a{
    28.  
    29.         display: inline-block;
    30.         background-color: #0aa1ed;
    31.         width: 100px;
    32.         height: 24px;
    33.         /*上下0 左右auto(居中),
    34.         让块级元素的文本内容居中使用text-align:center;
    35.         让块级元素自身在所在行内居中使用margin:0 auto*/
    36.         /*margin: 0 auto;*/
    37.         text-decoration: none;
    38.         color: white;
    39.         line-height: 24px;
    40.         border-radius: 3px;
    41.     }
    42.  
    43.  
    44.   </style>
    45. </head>
    46. <body>
    47. <div>
    48.   <img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img3.png" alt="">
    49.   <p class="title_p">戴尔(DELL)XPS13-9360-R1609 13.3英寸微边框笔记本电脑</p>
    50.   <p class="price_p">￥4600.00</p>
    51.   <a href="">查看详情</a>
    52. </div>
    53. </body>
    54. </html>

    1.3定位方式

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

    1.4定位方式之静态定位

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

    1.5定位方式之相对定位

    • 格式: position: relative;
    • 特点: 元素不脱离文档流(不管元素显示到什么位置都占着原来的位置)
    • 通过left/right/top/bottom相对于元素的初始位置做偏移
    • 相对定位可以实现元素层叠效果
    • 应用场景: 当需要移动某一个元素,而且其它元素不受影响时
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.   <style>
    7.     div{width: 100px;height: 100px;border: 1px solid red}
    8.     div:hover{
    9.       /*margin: 20px 0 0 20px;*/
    10.       /*修改定位方式为相对定位*/
    11.       position: relative;
    12.       top: 20px;
    13.       left: 20px;
    14.     }
    15.   </style>
    16. </head>
    17. <body>
    18. <div>div1</div>
    19. <div>div2</div>
    20. <div>div3</div>
    21. </body>
    22. </html>

    1.6定位方式之绝对定位

    • 格式: position:absolute;
    • 特点: 元素脱离文档流(不占原来的位置,后面的元素会顶上来)
    • 通过left/right/top/bttom相对于窗口或某一个上级元素做位置偏移
    • 应用场景:需要层叠显示并且元素不需要占原来的位置
    • 相对定位和绝对定位区别:
      • 相对定位不脱离文档流(占位置) 绝对定位脱离文档流不占位置
      • 相对定位参照物是原来位置, 绝对定位参照物是窗口(默认)或某一个上级元素
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.   <style>
    7.     div{width: 100px;height: 100px;border: 1px solid red}
    8.     #d1{
    9.       /*设置为绝对定位,元素脱离文档流*/
    10.       position: absolute;
    11.       /*相对于窗口做位置偏移*/
    12.       right: 20px;
    13.       bottom: 50px;
    14.     }
    15.   #big{
    16.     width: 200px;
    17.     height: 200px;
    18.     background-color: red;
    19.     margin: 100px 0 0 100px;
    20.  
    21.   }
    22.   #big>div{
    23.     width: 100px;
    24.     height: 100px;
    25.     background-color: green;
    26.     margin: 50px 0 0 50px;
    27.     /*如果想让绝对定位的元素位置偏移 以某个元素做参照物需要给元素添加相对定位*/
    28.     position: relative;/*做参照物*/
    29.   }
    30.   #big>div>div{
    31.     width: 50px;
    32.     height: 50px;
    33.     background-color: blue;
    34.     position: absolute;
    35.     left: 0;
    36.     top: 0;
    37.  
    38.   }
    39.  
    40.  
    41.   </style>
    42. </head>
    43. <body>
    44. <div id="big">
    45.   <div>
    46.     <div></div>
    47.   </div>
    48. </div>
    49. <div id="d1">div1</div>
    50. <div>div2</div>
    51. <div>div3</div>
    52. </body>
    53. </html>

    1.6.1绝对定位练习

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.   <style>
    7.     body>div{
    8.       width: 300px;
    9.       background-color: rgba(0,0,0,0.3);
    10.       padding: 10px;/*内容缩进10个像素*/
    11.       position: relative;/*做参照物*/
    12.     }
    13.     input{
    14.       width: 260px; /*300-40=260*/
    15.       border: 0;/*去掉自带边框*/
    16.       padding: 10px 20px;/**/
    17.     }
    18.     img{
    19.       position: absolute;
    20.       right: 40px;
    21.       top: 14px;
    22.     }
    23.     p{
    24.       font-size: 12px;
    25.       color: red;
    26.       margin: 0;
    27.     }
    28.   </style>
    29. </head>
    30. <body>
    31. <div>
    32.   <input type="text">
    33.   <img src="http://doc.canglaoshi.org/tstore_v1/images/login/yhm.png" alt="">
    34.   <p>用户名不能为空!</p>
    35. </div>
    36. </body>
    37. </html>

    1.7定位方式之固定定位

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

    1.8position定位回顾:

    1. 静态定位: static(默认) 无法层叠显示, 元素以左上为基准, 通过外边距
    2. 相对定位: relative 不脱离文档流, 通过left/right/top/bottom相对于初始位置做偏移
    3. 绝对定位: absolute 脱离文档流,通过left/right/top/bottom相对窗口或某一个上级元素
    4. 固定定位: fixed 脱离文档流, 通过left/right/top/bottom相对窗口做位置偏移
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.   <style>
    7.     #d1{
    8.       width: 1000px;
    9.       height: 100px;
    10.       background-color: red;
    11.       /*设置固定定位*/
    12.       position: fixed;
    13.       top: 0;
    14.     }
    15.     body{
    16.       padding-top: 100px;/*避免内容被盖上*/
    17.     }
    18.     #d2{
    19.       width: 50px;
    20.       height: 200px;
    21.       background-color: blue;
    22.       position: fixed;
    23.       right: 20px;
    24.       bottom: 50px;
    25.     }
    26.   </style>
    27. </head>
    28. <body>
    29. <div id="d1"></div>
    30. <div id="d2"></div>
    31. <img src="../b.jpg" alt="">
    32. <img src="../b.jpg" alt="">
    33. <img src="../b.jpg" alt="">
    34. <img src="../b.jpg" alt="">
    35. <img src="../b.jpg" alt="">
    36. <img src="../b.jpg" alt="">
    37. <img src="../b.jpg" alt="">
    38. </body>
    39. </html>

    1.9浮动定位

    • 格式: float:left/right;
    • 特点: 元素脱离文档流,从当前所在行向左或向右浮动,当撞到上级元素边缘或其它浮动元素时停止
    • 一行装不下时会自动折行,折行时有可能被卡主
    • 如果某个元素的所有子元素全部浮动,则自动识别的高度为0, 后面的元素会顶上来(如果被盖的内容有文字,文字会被挤出来) 最终可能导致显示异常, 给元素添加overflow:hidden可以解决此问题
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.   <style>
    7.     body>div{
    8.       width: 200px;
    9.       border: 1px solid red;
    10.       overflow: hidden;/*解决高度识别为0,带来的显示异常*/
    11.     }
    12.     #d1{
    13.       width: 50px;height: 50px;
    14.       background-color: red;
    15.       float: left;
    16.     }
    17.     #d2{
    18.       width: 50px;height: 50px;
    19.       background-color: green;
    20.       float: left;
    21.     }
    22.     #d3{
    23.       width: 50px;height: 50px;
    24.       background-color: blue;
    25.       float: left;
    26.     }
    27.     #d4{
    28.       width: 300px;
    29.       height: 300px;
    30.     }
    31.     ul{
    32.       list-style-type: none;/*去掉列表图标*/
    33.       overflow: hidden; /*解决子元素全部浮动 自动识别高度为0 的问题*/
    34.     }
    35.     li{
    36.       float: left;
    37.       margin-right: 20px;
    38.     }
    39.   </style>
    40. </head>
    41. <body>
    42. <ul>
    43.   <li><a href="">首页</a></li>
    44.   <li><a href="">免费课</a></li>
    45.   <li><a href="">直播课</a></li>
    46.   <li><a href="">精品课</a></li>
    47.   <li><a href="">线上班</a></li>
    48. </ul>
    49. <div>
    50.   <div id="d1"></div>
    51.   <div id="d2"></div>
    52.   <div id="d3"></div>
    53. </div>
    54. <div id="d4">我是粉色的</div>
    55. </body>
    56. </html>

    1.9.1综合练习

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 		<style type="text/css">
    7. 			*{
    8. 				
    9. 			}
    10. 			body{
    11. 				font: 12px "simhei", Arial, Helvetica, sans-serif;
    12. 				color: #666;
    13. 			}
    14. 			#div01{
    15. 				width: 366px;
    16. 				height: 233px;
    17. 				background-color: #E8E8E8;
    18. 			}
    19. 			#top_div{
    20. 				width: 366px;
    21. 				height: 35px;
    22. 				background-color: #0AA1ED;
    23. 				line-height: 35px;
    24. 			}
    25. 			span{
    26. 				
    27. 				margin: 0 9px 0 0 ;
    28. 				font-size: 16px;
    29. 				color: #FFFFFF;
    30. 				line-height: 35px;
    31. 			}
    32. 			img{
    33. 				margin-top: 5px;
    34. 				margin-left: 5px;
    35. 				float: left;
    36. 			}
    37. 			ul{
    38. 				list-style: none;
    39. 				overflow: hidden;
    40. 				padding: 0px;
    41. 			}
    42. 			li{
    43. 				float: left;
    44. 				margin-left: 10px;
    45. 				margin-bottom: 10px;
    46. 				
    47. 			}
    48. 			.c_div{
    49. 				width: 366px;
    50. 				color: #0AA1ED;
    51. 				font-size: 12px;
    52. 			}
    53. 			.c_div>p{
    54. 				margin-left: 10px;
    55. 			}
    56. 			li>a{
    57. 				color: #0AA1ED;
    58. 				text-decoration: dashed;
    59. 			}
    60. 		</style>
    61. 	</head>
    62. 	<body>
    63. 		<div id="div01">
    64. 			<div id="top_div"><img src="computer_icon1.png" alt=""><span>&nbsp;&nbsp;电脑,办公/1F</span></div>
    65. 			<div class="c_div">
    66. 				<p>电脑壁纸</p>
    67. 				<ul>
    68. 					
    69. 					<li><a href="">笔记本</a></li>
    70. 					<li><a href="">游戏机</a></li>
    71. 					<li><a href="">台式机</a></li>
    72. 					<li><a href="">一体机</a></li>
    73. 					<li><a href="">服务器</a></li>
    74. 					<li><a href="">联想</a></li>
    75. 				</ul>
    76. 			</div>
    77. 			<div class="c_div">
    78. 				<p>电脑配件</p>
    79. 				<ul>
    80. 					
    81. 					<li><a href="">CPU</a></li>
    82. 					<li><a href="">SSD硬盘</a></li>
    83. 					<li><a href="">显示器</a></li>
    84. 					<li><a href="">显卡</a></li>
    85. 					<li><a href="">组装电脑</a></li>
    86. 					<li><a href="">机箱</a></li>
    87. 				</ul>
    88. 			</div>
    89. 			<div class="c_div">
    90. 				<p>外设/游戏</p>
    91. 				<ul>
    92. 					
    93. 					<li><a href="">键盘</a></li>
    94. 					<li><a href="">鼠标</a></li>
    95. 					<li><a href="">U盘</a></li>
    96. 					<li><a href="">移动硬盘</a></li>
    97. 					<li><a href="">游戏设备</a></li>
    98. 					<li><a href="">智能单车</a></li>
    99. 				</ul>
    100. 			</div>
    101. 		</div>
    102. 		
    103. 	</body>
    104. </html>

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

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 		<style type="text/css">
    7. 			body{
    8. 				font: 12px "simhei", Arial, Helvetica, sans-serif;
    9. 				color: #666;
    10. 			}
    11. 			*{}
    12. 			#wai{
    13. 				float: left;
    14. 				
    15. 				width: 611px;
    16. 				height: 376px;
    17. 				background-color: #e8e8e8;
    18. 				background-image: url(study_computer_img1.png);
    19. 				background-repeat: no-repeat;
    20. 				background-size: 318px 319px;
    21. 				background-position: 90% 90%;
    22. 				overflow: hidden;
    23. 			}
    24. 			#nei{
    25. 				width: 255px;
    26. 				height: 242;
    27. 				padding:5px;
    28. 				margin-top: 68px;
    29. 				margin-left: 36px;
    30. 			}
    31. 			#wai1{
    32. 				margin-left: 10px;
    33. 				float: left;
    34. 				display: inline-block;
    35. 				width: 375px;
    36. 				height: 376px;
    37. 				background-color: #e8e8e8;
    38. 				background-image: url(study_computer_img2.png);
    39. 				background-repeat: no-repeat;
    40. 				background-size: 292px 232px;
    41. 				background-position: 85% 90%;
    42. 				overflow: hidden;
    43. 			}
    44. 			#nei1{
    45. 				width: 261px;
    46. 				height: 240px;
    47. 				padding:5px;
    48. 				margin-top: 39px;
    49. 				margin-left: 25px;
    50. 			}
    51. 			.title_P{
    52. 				margin-top: 0;
    53. 				color: #333333;
    54. 				font-size: 32px;
    55. 				margin-bottom: 12px;
    56. 				font-weight: lighter;
    57. 			}
    58. 			.intro_p{
    59. 				margin-bottom: 24px;
    60. 				font-size: 12px;
    61. 				font-weight: lighter;
    62. 			}
    63. 			.price_p{
    64. 				margin-bottom: 12px;
    65. 				font-weight: bold;
    66. 				color: #0AA1ED;
    67. 				font-size: 24px;
    68. 			}
    69. 			.a1{
    70. 				display: block;
    71. 				width: 132px;
    72. 				height: 40px;
    73. 				line-height: 40px;
    74. 				text-align: center;
    75. 				background-color: #0AA1ED;
    76. 				font-size: 20px;
    77. 				color: white;
    78. 				text-decoration: dashed;
    79. 				border-radius: 3px;
    80. 			}
    81. 			#bigdiv{
    82. 				overflow: hidden;
    83. 				width: 1000px;
    84. 				height: 376px;
    85. 			}
    86. 			#div01{
    87. 				float: left;
    88. 				width: 366px;
    89. 				height: 233px;
    90. 				background-color: #E8E8E8;
    91. 			}
    92. 			#top_div{
    93. 				width: 366px;
    94. 				height: 35px;
    95. 				background-color: #0AA1ED;
    96. 				line-height: 35px;
    97. 			}
    98. 			span{
    99. 				
    100. 				margin: 0 9px 0 0 ;
    101. 				font-size: 16px;
    102. 				color: #FFFFFF;
    103. 				line-height: 35px;
    104. 			}
    105. 			img{
    106. 				margin-top: 5px;
    107. 				margin-left: 5px;
    108. 				float: left;
    109. 			}
    110. 			ul{
    111. 				list-style: none;
    112. 				overflow: hidden;
    113. 				padding: 0px;
    114. 			}
    115. 			li{
    116. 				float: left;
    117. 				margin-left: 10px;
    118. 				margin-bottom: 10px;
    119. 				
    120. 			}
    121. 			.c_div{
    122. 				width: 366px;
    123. 				color: #0AA1ED;
    124. 				font-size: 12px;
    125. 			}
    126. 			.c_div>p{
    127. 				margin-left: 10px;
    128. 			}
    129. 			li>a{
    130. 				color: #0AA1ED;
    131. 				text-decoration: dashed;
    132. 			}
    133. 			.d1{
    134. 				float: left;
    135. 				width: 198px;
    136. 				height: 233px;
    137. 				text-align: center;
    138. 				background-color: #e8e8e8;
    139. 				margin-left: 12px;
    140. 			}
    141. 			.intro_p1{
    142. 				margin-top: 0;
    143. 				color: #000000;
    144. 				margin-bottom: 6px;
    145. 			}
    146. 			.price_p1{
    147. 				margin-top: 0;
    148. 				margin-bottom: 6px;
    149. 				font-size: 12px;
    150. 				font-weight: bold;
    151. 				color: #0AA1ED;
    152. 			}
    153. 			.a2{
    154. 				display: block;
    155. 				width: 100px;
    156. 				height: 24px;
    157. 				color: white;
    158. 				background-color: #0AA1ED;
    159. 				margin: 0 auto;
    160. 				line-height: 24px;
    161. 				text-decoration: solid;
    162. 				border-radius: 3px;
    163. 			}
    164. 			#bigdiv1{
    165. 				margin-top: 10px;
    166. 				width: 1000px;
    167. 				overflow: hidden;
    168. 			}
    169. 		</style>
    170. 	</head>
    171. 	<body>
    172. 		<div id="bigdiv">
    173. 			<div id="wai">
    174. 				<div id="nei">
    175. 					<p class="title_P">灵越 燃7000系列</p>
    176. 					<p class="intro_p">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
    177. 						英特尔HD显卡620含共享显卡内存</p>
    178. 					<p class="price_p">￥4999.00</p>
    179. 					<a href="" class="a1">查看详情</a>
    180. 				</div>
    181. 			</div>
    182. 			<div id="wai1">
    183. 				<div id="nei1">
    184. 					<p class="title_P">颜值 框不住</p>
    185. 					<p class="intro_p">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
    186. 						英特尔HD显卡620含共享显卡内存</p>
    187. 					<p class="price_p">￥6888.00</p>
    188. 					<a href="" class="a1">查看详情</a>
    189. 				</div>
    190. 			</div>
    191. 		</div>
    192. 		
    193. 		<div id="bigdiv1">
    194. 			<div id="div01">
    195. 				<div id="top_div"><img src="computer_icon1.png" alt=""><span>&nbsp;&nbsp;电脑,办公/1F</span></div>
    196. 				<div class="c_div">
    197. 					<p>电脑壁纸</p>
    198. 					<ul>
    199. 						
    200. 						<li><a href="">笔记本</a></li>
    201. 						<li><a href="">游戏机</a></li>
    202. 						<li><a href="">台式机</a></li>
    203. 						<li><a href="">一体机</a></li>
    204. 						<li><a href="">服务器</a></li>
    205. 						<li><a href="">联想</a></li>
    206. 					</ul>
    207. 				</div>
    208. 				<div class="c_div">
    209. 					<p>电脑配件</p>
    210. 					<ul>
    211. 						
    212. 						<li><a href="">CPU</a></li>
    213. 						<li><a href="">SSD硬盘</a></li>
    214. 						<li><a href="">显示器</a></li>
    215. 						<li><a href="">显卡</a></li>
    216. 						<li><a href="">组装电脑</a></li>
    217. 						<li><a href="">机箱</a></li>
    218. 					</ul>
    219. 				</div>
    220. 				<div class="c_div">
    221. 					<p>外设/游戏</p>
    222. 					<ul>
    223. 						
    224. 						<li><a href="">键盘</a></li>
    225. 						<li><a href="">鼠标</a></li>
    226. 						<li><a href="">U盘</a></li>
    227. 						<li><a href="">移动硬盘</a></li>
    228. 						<li><a href="">游戏设备</a></li>
    229. 						<li><a href="">智能单车</a></li>
    230. 					</ul>
    231. 				</div>
    232. 			</div>
    233. 			<div class="d1">
    234. 				<img src="study_computer_img3.png" alt="" width="198px" height="136px">
    235. 				<p class="intro_p1">戴尔(DELL)XPS13-9360-R1609 13.3英
    236. 				<br>寸微边框笔记本电脑</p>
    237. 				<p class="price_p1">￥4600.00</p>
    238. 				<a href="" class="a2">查看详情</a>
    239. 			</div>
    240. 			<div class="d1">
    241. 				<img src="study_computer_img4.png" alt="" width="198px" height="136px">
    242. 				<p class="intro_p1">戴尔(DELL)XPS13-9360-R1609 13.3英
    243. 				<br>寸微边框笔记本电脑</p>
    244. 				<p class="price_p1">￥4600.00</p>
    245. 				<a href="" class="a2">查看详情</a>
    246. 			</div>
    247. 			<div class="d1">
    248. 				<img src="study_computer_img5.png" alt="" width="198px" height="136px">
    249. 				<p class="intro_p1">戴尔(DELL)XPS13-9360-R1609 13.3英
    250. 				<br>寸微边框笔记本电脑</p>
    251. 				<p class="price_p1">￥4600.00</p>
    252. 				<a href="" class="a2">查看详情</a>
    253. 			</div>
    254. 		</div>
    255. 	</body>
    256. </html>

  • 相关阅读:
    Ubuntu为什么键盘会出现乱字符
    Ubuntu环境下遇到的问题与解决方法
    怎么高效学习Java进阶技能 需要掌握哪些知识
    Docker部署Logstash 7.2.0
    3.x名称空间详解
    零代码编程：用ChatGPT批量采集bookroo网页上的英文书目列表
    动态内存与智能指针
    在Ubuntu20.04安装StarRocks On Docker并在DataGrip配置JDBC协议连接容器内StarRocks2.3.2
    视频通话中的Camera操作
    MySQL---基本的select语句
  • 原文地址：https://blog.csdn.net/TheNewSystrm/article/details/125527996