CSS基础操作（八）-定位方式实战、学子商城练习

6.6 定位方式实战（一）

测试代码：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>学子商城测试三</title>
 <style type="text/css">
 /*设置整个页面默认属性*/
 body {
     font: 12px "simhei", Arial, Helvetica, sans-serif;
     color: #666;
     margin: 0px;
     padding: 0px;
     background-color: #f5f5f5;
 }
 
 /*设置最外层div*/
 body>div {
     width: 366px;
     height: 233px;
     background-color: #e8e8e8;
 }
 
 /*头部div*/
 #top_div {
     height: 35px;
     background-color: #0aa1ed;
     border-radius: 2px;
 }
 
 /*图片*/
 #top_div>img {
     margin: 8px 0 0 10px;
 }
 
 /*标题*/
 #top_div>span {
     color: #ffffff;
     font-size: 16px;
     /*如果需要移动某一个元素，并且其他元素完全不受影响，使用相对定位*/
     position: relative;
     top: -3px; /*向上移动要赋负值*/
 }
 
 /*子div*/
 .c1 {
     padding-left: 10px;/*向右移动*/
 }
 
 /*表格ul属性*/
 ul {
     list-style-type: none; /*去除样式*/
     padding-left: 0; /*去掉ul自带的40左内边距*/
     margin: 10px 0;
     /*如果使用浮动定位，必须考虑高度是不是为0了*/
     overflow: hidden; /*使类标题换行*/
 }
 
 /*列属性*/
 ul>li {
     /*使用浮动定位，将纵向排列改成横向排列*/
     float: left;
     margin-right: 10px; /*标签之间隔开*/
     margin-bottom: 10px; /*两类之间隔开*/
 }
 
 /*类标题*/
 p {
     color: #62b5ec;
 }
 
 /*a标签*/
 a {
     text-decoration: none; /*去除超链接自带的下划线*/
     color: #0aa1ed;
 }
 </style>
 </head>
 <body>
   <div>
     <div id="top_div">
       <img alt="图片加载失败"
         src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/computer_icon1.png">
       <span>电脑,办公/1F</span>
     </div>
     <div class="c1">
       <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="c1">
       <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="c1">
       <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>

显示效果：

6.7 定位方式实战（二）

测试代码：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>学子商城测试四</title>
 <style type="text/css">
 /*设置整个页面默认属性*/
 body {
     font: 12px "simhei", Arial, Helvetica, sans-serif;
     color: #666;
     margin: 0px;
     padding: 0px;
     background-color: #f5f5f5;
 }
 
 /*设置外层div*/
 div {
     width: 198px;
     height: 233px;
     background-color: #e8e8e8;
     text-align: center;
 }
 
 /*设置p1*/
 .p1 {
     margin: 0 0 6px 0; /*改变p1自带外边距*/
     color: #000;
 }
 
 /*设置p2*/
 .p2 {
     margin: 6px 0; /*改变p2自带外边距*/
     color: #0aa1ed;
     font-weight: bold;
 }
 
 /*设置按钮*/
 a {
     text-decoration: none; /*去除下划线*/
     color: #ffffff;
     width: 100px; /*设置成块元素，可修改宽高*/
     height: 24px;
     display: inline-block;
     background-color: #0aa1ed;
     border-radius: 3px;
     line-height: 24px; /*字体垂直居中*/
 }
 
 /*鼠标在图片山悬停时变成小手*/
 img {
     cursor: pointer;
 }
 </style>
 </head>
 <body>
   <div>
     <img alt="图片加载失败"
       src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img3.png">
     <p class="p1">戴尔(DELL)XPS13-9360-R1609 13.3英寸微边框笔记本电脑</p>
     <p class="p2">￥4600.00</p>
     <a href="#">查看详情</a>
   </div>
 </body>
 </html>

显示效果：

6.8 学子商城练习

测试代码：与实际页面还有差距

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>学子商城</title>
 <style type="text/css">
 /*在body里面写的样式是全局样式，所有标签都能继承下去*/
 body {
     font: 12px "simhei", Arial, Helvetica, sans-serif;
     color: #666;
     margin: 0px;
     padding: 0px;
     background-color: #f5f5f5;
 }
 
 /*外层最大div*/
 #web {
     width: 1000px;
     margin: 0 auto; /*居中*/
     overflow: hidden;
 }
 
 /*第一行、第二行div*/
 #web>div {
     margin-bottom: 5px;
     overflow: hidden;
 }
 
 /*左上div*/
 #top_left {
     width: 611px;
     height: 376px;
     background-color: #e8e8e8;
     background-image:
         url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
     background-repeat: no-repeat;
     background-color: 318px 319px;
     background-position: 90% 70%;
     overflow: hidden;
     margin: 0 auto;
     float: left;
 }
 
 #top_left>div {
     width: 245px;
     height: 232px;
     margin: 68px 0 0 36px;
 }
 
 #top_left>div .p1 {
     font-size: 32px;
     color: #333;
     margin: 0 0 12px 0;
 }
 
 #top_left>div .p2 {
     
 }
 
 #top_left>div .p3 {
     font-size: 24px;
     font-weight: bold;
     color: #0aa1ed;
     margin-bottom: 12px; /*改变p标签的下外边距，默认很宽*/
 }
 
 #top_left>div input {
     width: 132px;
     height: 40px;
     background-color: #0aa1ed;
     color: white;
     font-size: 20px;
     border: 0; /*去除边框*/
     border-radius: 3px;
     cursor: pointer; /*鼠标悬浮时显示小手*/
 }
 
 #top_right {
     width: 375px;
     height: 376px;
     background-color: #e8e8e8;
     background-image:
         url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img2.png");
     background-repeat: no-repeat;
     background-size: 292px 232px;
     background-position: 80% 90%;
     overflow: hidden;
     margin: 0 auto;
     float: right;
 }
 
 #top_right>div {
     margin: 39px 0 0 25px;
     width: 253px;
     height: 232px;
 }
 
 #top_right>div .p1 {
     font-size: 32px;
     color: #333;
     margin-bottom: 12px;
 }
 
 #top_right>div .p3 {
     font-size: 24px;
     color: #0aa1ed;
     font-weight: bold;
     margin-bottom: 12px;
 }
 
 #top_right>div a {
     display: block; /*设置为块级元素*/
     width: 132px;
     height: 40px;
     background-color: #0aa1ed;
     color: white;
     font-size: 20px;
     text-decoration: none; /*去除超链接的下划线*/
     text-align: center; /*水平样式居中*/
     line-height: 40px; /*行高40排序，居中显示*/
     border-radius: 3px;
 }
 
 /*设置最外层div*/
 #bottom_left {
     width: 366px;
     height: 233px;
     background-color: #e8e8e8;
     float: left;
 }
 
 /*头部div*/
 #bottom_left>#top_div {
     height: 35px;
     background-color: #0aa1ed;
     border-radius: 2px;
 }
 
 /*图片*/
 #bottom_left>#top_div>img {
     margin: 8px 0 0 10px;
 }
 
 /*标题*/
 #bottom_left>#top_div>span {
     color: #ffffff;
     font-size: 16px;
     /*如果需要移动某一个元素，并且其他元素完全不受影响，使用相对定位*/
 position: relative; 
top: -3px; /*向上移动要赋负值*/ 
} 
 
/*子div*/ 
#bottom_left .c1 { 
padding-left: 10px; /*向右移动*/ 
} 
 
/*表格ul属性*/ 
#bottom_left .c1 ul { 
list-style-type: none; /*去除样式*/ 
padding-left: 0; /*去掉ul自带的40左内边距*/ 
margin: 10px 0; 
/*如果使用浮动定位，必须考虑高度是不是为0了*/ 
overflow: hidden; /*使类标题换行*/ 
} 
 
/*列属性*/ 
#bottom_left .c1 ul>li { 
/*使用浮动定位，将纵向排列改成横向排列*/ 
float: left; 
margin-right: 10px; /*标签之间隔开*/ 
margin-bottom: 10px; /*两类之间隔开*/ 
} 
 
/*类标题*/ 
#bottom_left .c1 p { 
color: #62b5ec; 
} 
 
/*a标签*/ 
#bottom_left .c1 a { 
text-decoration: none; /*去除超链接自带的下划线*/ 
color: #0aa1ed; 
} 
 
/*设置外层div*/ 
.bottom_right { 
width: 198px; 
height: 233px; 
background-color: #e8e8e8; 
text-align: center; 
float: left; 
margin-left: 10px; 
} 
 
/*设置p1*/ 
.bottom_right .p1 { 
margin: 0 0 6px 0; /*改变p1自带外边距*/ 
color: #000; 
} 
 
/*设置p2*/ 
.bottom_right .p2 { 
margin: 6px 0; /*改变p2自带外边距*/ 
color: #0aa1ed; 
font-weight: bold; 
} 
 
/*设置按钮*/ 
.bottom_right a { 
text-decoration: none; /*去除下划线*/ 
color: #ffffff; 
width: 100px; /*设置成块元素，可修改宽高*/ 
height: 24px; 
display: inline-block; 
background-color: #0aa1ed; 
border-radius: 3px; 
line-height: 24px; /*字体垂直居中*/ 
} 
 
/*鼠标在图片山悬停时变成小手*/ 
.bottom_right img { 
cursor: pointer; 
} 
</style> 
</head> 
<body> 
  <!-- 最外层 --> 
  <div id="web"> 
    <!-- 第一行 --> 
    <div> 
      <div id="top_left"> 
        <div> 
          <p class="p1">灵越 燃7000系列</p> 
          <p class="p2"> 
            酷睿双核i5处理器 | 256GB SSD| 8GB内存<br> 英特尔HD显卡620含共享显卡内存 
          </p> 
          <p class="p3">￥4999.00</p> 
          <input type="button" value="查看详情"> 
        </div> 
      </div> 
      <div id="top_right"> 
        <div> 
          <p class="p1">颜值 框不住</p> 
          <p class="p2"> 
            酷睿双核i5处理器|256GB SSD| 8GB内存<br> 英特尔HD显卡620含共享显卡内存 
          </p> 
          <p class="p3">￥6888.00</p> 
          <a href="http://www.baidu.com">查看详情</a> 
        </div> 
      </div> 
    </div> 
    <!-- 第二行 --> 
    <div> 
      <div id="bottom_left"> 
        <div id="top_div"> 
          <img alt="图片加载失败" 
            src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/computer_icon1.png"> 
          <span>电脑,办公/1F</span> 
        </div> 
        <div class="c1"> 
          <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="c1"> 
          <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="c1"> 
          <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="bottom_right"> 
        <img alt="图片加载失败" 
          src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img3.png"> 
        <p class="p1">戴尔(DELL)XPS13-9360-R1609 13.3英寸微边框笔记本电脑</p> 
        <p class="p2">￥4600.00</p> 
        <a href="#">查看详情</a> 
      </div> 
      <div class="bottom_right"> 
        <img alt="图片加载失败" 
          src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img4.png"> 
        <p class="p1">14.8mm超轻薄笔记本电脑 航海王版 13.3英寸微边框笔记本电脑</p> 
        <p class="p2">￥5600.00</p> 
        <a href="#">查看详情</a> 
      </div> 
      <div class="bottom_right"> 
        <img alt="图片加载失败" 
          src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img5.png"> 
        <p class="p1">联想(Lenovo) YOGA900 多彩版 13.3英寸微边框笔记本电脑</p> 
        <p class="p2">￥6600.00</p> 
        <a href="#">查看详情</a> 
      </div> 
    </div> 
  </div> 
</body> 
</html>

显示效果：

posted @ 2021-07-17 17:44 Coder_Cui 阅读(124) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

越努力，越幸运，2022，小崔，加油！

CSS基础操作（八）-定位方式实战、学子商城练习

6.6 定位方式实战（一）

6.7 定位方式实战（二）

6.8 学子商城练习

公告