first commit

历届学生/吴欣阳/项目开发/练习项目/课程练习/5.27/CSS练习.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS练习</title>
+    <link rel="stylesheet" href="./css练习.css">
+</head>
+<body>
+    <div class="hader">
+        <div class="logo">
+            <a href=""><img src="https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png" alt="图片无法载入" class="TXLOGO"></a>
+            <!-- 图片 -->
+            <input type="text" class="SOUSUO">
+            <!-- 文本框 -->
+            <input type="button" value="搜索">
+            <!-- 搜索按钮 -->
+            <input type="button" value="登录" class="denglu">
+            <!-- 登录 -->
+        </div>
+        <div class="tag">
+            <ul>
+                <li><a href="">新闻</a></li>
+                <li><a href="">视频</a></li>
+                <li><a href="">图片</a></li>
+                <li><a href="">军事</a></li>
+                <li><a href="">NBA</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>
+                <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>
+    
+</body>
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/5.27/css练习.css

@@ -0,0 +1,34 @@
+body{margin: 0;}
+ul{margin: 0;}
+li{list-style: none}
+/* 清除样式 */
+.TXLOGO{
+    width: 134px ;height: 35.46px;
+    margin: 37px;
+    
+}
+.SOUSUO{width: 320px;height: 32px;}
+
+.tag ul li{
+width: 79px;
+/* 宽度 */
+height: 50px;
+/* 高度 */
+background-color: #1479d7;
+/* 背景色 */
+padding-left: 20px;
+/* 内边距左20px */
+/* box-sizing:border-box; （这个应该是没有加）*/
+line-height: 50px;
+/* 居中跟高度保持一致 */
+float: left;
+/* 浮动 */
+
+
+}    
+a{text-decoration:none;
+    color: white;
+    font-size: 18px;}
+.denglu{
+    text-align: right;
+}

历届学生/吴欣阳/项目开发/练习项目/课程练习/5.27/修改后/QQ导航.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="index.css">
+</head>
+
+<body>
+    <div>
+        <ul class="header">
+            <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="">NBA</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>
+            <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>
+</body>
+
+</html>

历届学生/吴欣阳/项目开发/练习项目/课程练习/5.27/修改后/index.css

@@ -0,0 +1,44 @@
+body,
+ul,
+li,
+p {
+    margin: 0%;
+    padding: 0%;
+}
+/* 清除样式 */
+li {
+    overflow: hidden;/* 清除li标签样式 */
+     float: left;/* 浮动居左 */
+    width: 79px;/*设置高度79px  */
+    line-height: 50px;/*设置单行文字垂直对齐  */
+    text-align: center;/*设置单元格内对齐  */
+}
+
+
+
+
+
+a {
+    text-decoration: none;/* 清除a标签样式 */
+}
+
+.header {
+    background-color: #1479d7;/*设置背景色  */
+    height: 50px;/*设置高度  */
+    overflow: hidden;/*在没有单元格高度时用于高度等于子元素高度  */
+    width: 1400px;/*设置宽度  */
+    margin: 0 auto;  /* 设置外边距居中对齐 */
+    padding-left: 20px;  /*设置内边距左20px  */
+    box-sizing: border-box;  /*保持宽高等于你设置的宽高  */
+    border-radius: 3px;  /*圆角  */
+
+}
+
+.header li a {
+    color: white;  /*字体颜色  */
+    padding: 4px 5px;  /*内边距的大小  */
+}
+.header li a:hover{
+    color: #14539a;  /*鼠标悬浮更改颜色  */
+    background-color: #cbe1ed;  /*鼠标悬浮更改底色  */
+}