Home Explore Help
Sign In
lovecoding
/
W250511
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

admin

fengchuanyu 2 weeks ago
parent
ff4f9ba9d7
commit
66d48f3fed
5 changed files with 161 additions and 12 deletions
Unified View Show Diff Stats
  1. 30 0
      2-CSS/24_盒子模型.html
  2. 65 0
      2-CSS/25_背景图片.html
  3. BIN
      2-CSS/image/bg.jpg
  4. BIN
      2-CSS/image/icon-slides.png
  5. 66 12
      2-CSS/练习13_小米官网.html

+ 30 - 0
2-CSS/24_盒子模型.html
View File 

@@ -0,0 +1,30 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* （box-sizing: content-box;） 标准盒模型 大小=width*height+padding+border */
 
+        /* .box{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            padding: 10px;
 
+            border:5px solid black;
 
+        } */
 
+        /*  （box-sizing: border-box;） 怪异盒 宽度 就是 width*height。 border padding 不会影响当前元素的尺寸*/
 
+        .box{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            padding: 10px;
 
+            border:5px solid black;
 
+            box-sizing: border-box;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 65 - 0
2-CSS/25_背景图片.html
View File 

@@ -0,0 +1,65 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        .box{
 
+            /* width: 400px;
 
+            height: 400px;
 
+            border:5px solid black; */
 
+            /* 背景图片 */
 
+            /* 背景图片如果无法撑满当前元素 那么他会重复出现直至铺满 */
 
+            /* background-image: url("./image/logo.png"); */
 
+            /* 背景图片不重复 */
 
+            /* background-repeat: no-repeat; */
 
+            /* 背景图片尺寸 两个数值 第一个宽 第二个高 */
 
+            /* background-size: 400px 400px; */
 
+            /* background-size: 100% 100%; */
 
+
 
+            /* background-image: url("./image/bg.jpg"); */
 
+
 
+            /* background-size: 100% 100%; */
 
+            /* 可以让背景图完整展示 保证比例 */
 
+            /* background-size: contain; */
 
+            /* 背景图可以铺满整个元素 但是会导致图片被裁减 */
 
+            /* background-size: cover; */
 
+
 
+            
+        }
 
+
 
+        .box{
 
+            width: 400px;
 
+            height: 400px;
 
+            border:5px solid black;
 
+
 
+            background-image: url("./image/logo.png");
 
+            background-repeat: no-repeat;
 
+
 
+            /* 背景图片定位 两个值 第一个横向移动 纵向移动*/
 
+            /* background-position: 20px 20px; */
 
+            /* background-position: right bottom; */
 
+            background-position: center center;
 
+
 
+        }
 
+        /* 雪碧图 */
 
+        .box2{
 
+            width: 40px;
 
+            height: 60px;
 
+            border:1px solid red;
 
+            background-image: url("./image/icon-slides.png");
 
+            background-position: -40px 0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        hello world
 
+    </div>
 
+
 
+    <div class="box2">
 
+
 
+    </div>
 
+</body>
 
+</html>

BIN
2-CSS/image/bg.jpg
View File


BIN
2-CSS/image/icon-slides.png
View File


+ 66 - 12
2-CSS/练习13_小米官网.html
View File 

@@ -5,7 +5,7 @@
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Document</title>
 
     <title>Document</title>
 
-    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4974983_5en83d04csd.css">
 
+    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4974983_eksisevw5uf.css">
 
     <style>
 
     <style>
 
         /* css reset 样式重置 把浏览器自带的标签样式去掉 */
 
         /* css reset 样式重置 把浏览器自带的标签样式去掉 */
 
         * {
 
         * {
 
@@ -185,30 +185,34 @@
 
             float: left;
 
             float: left;
 
         }
 
         }
 
 
 
-        .search-content .center-nav{
 
+        .search-content .center-nav {
 
             float: left;
 
             float: left;
 
             margin-left: 180px;
 
             margin-left: 180px;
 
             padding-top: 12px;
 
             padding-top: 12px;
 
         }
 
         }
 
-        .search-content .center-nav li{
 
+
 
+        .search-content .center-nav li {
 
             float: left;
 
             float: left;
 
             font-size: 16px;
 
             font-size: 16px;
 
             color: #333;
 
             color: #333;
 
             padding: 26px 10px 38px;
 
             padding: 26px 10px 38px;
 
         }
 
         }
 
-        .search-content .center-nav li:hover{
 
+
 
+        .search-content .center-nav li:hover {
 
             color: #ff6700;
 
             color: #ff6700;
 
             cursor: pointer;
 
             cursor: pointer;
 
         }
 
         }
 
-        .search-content .search-box{
 
+
 
+        .search-content .search-box {
 
             margin-top: 25px;
 
             margin-top: 25px;
 
             float: right;
 
             float: right;
 
             font-size: 0;
 
             font-size: 0;
 
             position: relative;
 
             position: relative;
 
             width: 275px;
 
             width: 275px;
 
         }
 
         }
 
-        .search-content .search-box input{
 
-            border:1px solid #e0e0e0;
 
+
 
+        .search-content .search-box input {
 
+            border: 1px solid #e0e0e0;
 
             width: 223px;
 
             width: 223px;
 
             height: 48px;
 
             height: 48px;
 
             outline: 0;
 
             outline: 0;
 
@@ -217,20 +221,49 @@
 
             position: absolute;
 
             position: absolute;
 
             left: 0;
 
             left: 0;
 
         }
 
         }
 
-        .search-content .search-box button{
 
+
 
+        .search-content .search-box button {
 
             width: 52px;
 
             width: 52px;
 
             height: 50px;
 
             height: 50px;
 
-            border:1px solid #e0e0e0;
 
+            border: 1px solid #e0e0e0;
 
             background-color: #fff;
 
             background-color: #fff;
 
             position: absolute;
 
             position: absolute;
 
             left: 222px;
 
             left: 222px;
 
-         
+
 
         }
 
         }
 
-        .search-content .search-box button i{
 
+
 
+        .search-content .search-box button i {
 
             font-size: 24px;
 
             font-size: 24px;
 
             color: #616161;
 
             color: #616161;
 
         }
 
         }
 
+
 
         /* 顶部搜索框 结束 */
 
         /* 顶部搜索框 结束 */
 
+        /* 轮播图区域 开始  */
 
+        .swiper-content{
 
+            position: relative;
 
+        }
 
+        .swiper-content .swiper-nav{
 
+            position: absolute;
 
+            width: 234px;
 
+            height: 460px;
 
+            background-color: rgba(105, 101, 101, .6);
 
+            padding:30px 20px;
 
+            /* 改为怪异盒模型 */
 
+            box-sizing: border-box;
 
+        }
 
+        .swiper-content .swiper-img img{
 
+            width: 1226px;
 
+            height: 460px;
 
+        }
 
+        .swiper-content .swiper-nav li{
 
+            height: 42px;
 
+            color: #fff;
 
+            font-size: 14px;
 
+        }
 
+        .swiper-content .swiper-nav i{
 
+            float: right;
 
+        }
 
+        /* 轮播图区域 结束  */
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
 
 
@@ -292,7 +325,7 @@
 
         </div>
 
         </div>
 
         <!-- 头部导航 开始 -->
 
         <!-- 头部导航 开始 -->
 
         <!--顶部搜索框 开始  -->
 
         <!--顶部搜索框 开始  -->
 
-        <div class="search-content main-width">
 
+        <div class="search-content clearfix main-width">
 
             <div class="logo">
 
             <div class="logo">
 
                 <img src="./image/logo.png" alt="logo">
 
                 <img src="./image/logo.png" alt="logo">
 
             </div>
 
             </div>
 
@@ -316,6 +349,27 @@
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
         <!-- 顶部搜索框 结束 -->
 
         <!-- 顶部搜索框 结束 -->
 
+        <!--轮播图区域 开始  -->
 
+        <div class="swiper-content main-width">
 
+            <div class="swiper-nav">
 
+                <ul>
 
+                    <li>手机 <i class="iconfont icon-arrow"></i> </li>
 
+                    <li>电视 <i class="iconfont icon-arrow"></i> </li>
 
+                    <li>家电 <i class="iconfont icon-arrow"></i></li>
 
+                    <li>笔记本 平板 显示器 <i class="iconfont icon-arrow"></i></li>
 
+                    <li>出行 穿戴 <i class="iconfont icon-arrow"></i></li>
 
+                    <li>耳机 音箱 <i class="iconfont icon-arrow"></i></li>
 
+                    <li>健康 儿童 <i class="iconfont icon-arrow"></i></li>
 
+                    <li>生活 箱包 <i class="iconfont icon-arrow"></i></li>
 
+                    <li>智能 路由器 <i class="iconfont icon-arrow"></i></li>
 
+                    <li>电源 配件 <i class="iconfont icon-arrow"></i></li>
 
+                </ul>
 
+            </div>
 
+            <div class="swiper-img">
 
+                <img src="./image/bg.jpg" alt="bg">
 
+            </div>
 
+        </div>
 
+        <!-- 轮播图区域 结束 -->
 
     </div>
 
     </div>
 
 </body>
 
 </body>