diff --git "a/\346\235\250\346\210\220\350\261\252/20241014-\344\274\252\347\261\273.md" "b/\346\235\250\346\210\220\350\261\252/20241014-\344\274\252\347\261\273.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c5aed343a225908e3a38b2625edfc0c06e4f06be
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/20241014-\344\274\252\347\261\273.md"
@@ -0,0 +1,94 @@
+1. `:hover`：鼠标悬停在元素上时。
+
+```css
+a:hover {
+    color: red;
+}
+```
+2. `:active`：元素被激活（如点击）时。
+
+```css
+button:active {
+    background-color: blue;
+}
+```
+2. `:focus`：元素获得焦点时（通常用于表单元素）。
+
+```css
+input:focus {
+    border-color: green;
+}
+```
+3. `:link`：未访问的链接。
+
+```css
+a:link {
+    color: blue;
+}
+```
+4. `:visited`：已访问的链接。
+
+```css
+a:visited {
+    color: purple;
+}
+```
+5. `:first-child`：选择作为其父元素的第一个子元素的元素。
+
+```css
+ul li:first-child {
+    font-weight: bold;
+}
+```
+6. `:last-child`：选择作为其父元素的最后一个子元素的元素。
+
+```css
+ul li:last-child {
+    font-style: italic;
+}
+```
+7. `:nth-child(n)`：选择作为其父元素的第 n 个子元素的元素。
+
+```css
+ul li:nth-child(2) {
+    color: red;
+}
+```
+8. `:nth-last-child(n)`：选择作为其父元素的倒数第 n 个子元素的元素。
+
+```css
+ul li:nth-last-child(2) {
+    color: green;
+}
+```
+9. `:not(selector)`：排除选择器选择的元素。
+
+```css
+div:not(.container) {
+    background-color: yellow;
+}
+```
+10. `:checked`：用于选择被勾选的单选按钮或复选框。
+
+```css
+input[type="checkbox"]:checked {
+    background-color: lightgreen;
+}
+```
+11. `:enabled` 和 `:disabled`：用于选择可用或不可用的表单元素。
+
+```css
+input:enabled {
+    background-color: lightblue;
+}
+input:disabled {
+    background-color: lightgray;
+}
+```
+12. `:empty`：选择没有子元素的元素。
+
+```css
+p:empty {
+    display: none;
+}
+```
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/20241016-\347\273\247\346\211\277\346\200\247\345\261\202\345\217\240\346\200\247\347\233\222\346\250\241\345\236\213.md" "b/\346\235\250\346\210\220\350\261\252/20241016-\347\273\247\346\211\277\346\200\247\345\261\202\345\217\240\346\200\247\347\233\222\346\250\241\345\236\213.md"
new file mode 100644
index 0000000000000000000000000000000000000000..c1f91e4776d860bd8b0189fa3be85977e467d7ce
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/20241016-\347\273\247\346\211\277\346\200\247\345\261\202\345\217\240\346\200\247\347\233\222\346\250\241\345\236\213.md"
@@ -0,0 +1,43 @@
+### css的继承性
++ CSS（层叠样式表）的继承性是指某些CSS属性可以被HTML元素的子元素继承。这意味着，如果你为一个父元素定义了某个CSS属性，那么这个属性的值也会应用到它的子元素上，除非子元素有自己更具体的样式规则。
++ 以下是一些常见的可以继承的CSS属性：
+    + font-family - 字体族
+    + font-size - 字体大小
+    + font-weight - 字体粗细
+    + font-style - 字体风格（如斜体）
+    + text-align - 文本对齐方式
+    + text-indent - 文本缩进
+    + text-transform - 文本转换（如大写、小写）
+    + letter-spacing - 字符间距
+    + word-spacing - 单词间距
+    + line-height - 行高
+    + color - 文本颜色
+    + visibility - 元素的可见性
+    + cursor - 鼠标光标样式
++ 而有一些属性则不能被继承，它们只会应用于设置它们的元素本身，例如：
+    + width 和 height - 元素的宽和高
+    + margin 和 padding - 外边距和内边距
+    + border - 边框样式
+    + background - 背景样式
+    + float - 浮动属性
+    + display - 显示类型
+
+### css的层叠性
++ 计算权重
++ 多个选择器选择同一元素
+    1. id 选择器>类选择器、属性选择器、伪类选择器>标签选择器、伪元素选择器
+    2. 若权重相同时，采用就近原则
+    3. `!important`标记：优先级最高
+
+### 盒模型
+1. 内容`Content`：盒子的内部区域，包含元素的文本、图片、视频等实际内容。
+由width和height属性控制。
+2. 内边距`Padding`：内容区域周围的空间，可以看作是内容与边框之间的填充。
+由padding-top、padding-right、padding-bottom、padding-left属性控制，或者使用padding简写属性。
+3. 边框`Border`：围绕内边距和内容的线。
+由border-width、border-style、border-color属性控制，或者使用border简写属性。
+4. 外边距`Margin`：边框外的空间，用于在元素之间创建距离。
+由margin-top、margin-right、margin-bottom、margin-left属性控制，或者使用margin简写属性。
+5. 盒模型的总宽度和高度计算方式如下：
+    + 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
+    + 总高度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
diff --git "a/\346\235\250\346\210\220\350\261\252/20241017-\346\265\256\345\212\250.md" "b/\346\235\250\346\210\220\350\261\252/20241017-\346\265\256\345\212\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5706141329db39e6ae4e17ea096afa4b7bfae252
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/20241017-\346\265\256\345\212\250.md"
@@ -0,0 +1,180 @@
+### 行内元素
+1. 定义:行内元素在页面上按照文本的顺序排列，它们不会以新行开始。行内元素的宽度通常由其内容决定，而高度则由行高决定。行内元素不会独占一行，它们会与其他行内元素并排显示。
+
+2. 常见的行内元素：
+```html
+<span>
+<a>
+<img>
+<strong>
+<em>
+<label>
+```
+3. 行内元素的特点：
+    + 不能设置width和height属性
+    + margin和padding属性在水平方向上有效，但在垂直方向上通常无效（除了padding-top和padding-bottom）
+    + 不能设置float属性
+### 块级元素
+1. 定义:块级元素在页面上以块的形式显示，它们通常会以新行开始。块级元素的宽度默认填满其父元素的宽度，除非指定了宽度。块级元素的高度由内容决定，但可以通过设置height属性来改变
+
+2. 常见的块级元素：
+```html
+<div>
+<p>
+<h1>~<h6>
+<ul>
+<ol>
+<li>
+<table>
+```
+
+3. 块级元素的特点：
+    + 可以设置width和height属性
+    + margin和padding属性在所有方向上都有效
+    + 可以设置float属性
+
+### 转换元素类型
+`display: block;`：将元素设置为块级元素
+`display: inline;`：将元素设置为行内元素
+`display: inline-block;`：将元素设置为行内块级元素，这意味着元素在行内显示，但可以设置宽度和高度
+
+### 基本的CSS浮动属性：
+
+`float: left;`：元素向左浮动
+`float: right;`：元素向右浮动
+`float: none;`：元素不浮动（默认值）
+
+注：
+使用clear属性：可以设置为left、right或both，来防止元素环绕在浮动元素周围
+使用额外的清除元素：在浮动元素之后添加一个空的块级元素，并设置`·`clear: both`;
+使用overflow属性：给包含浮动元素的父元素设置`overflow: auto;`或`overflow: hidden;`可以自动清除内部的浮动
+
+### 练习
+![简单图床 - EasyImage](https://www.yuzs.love/i/2024/10/20/ug5n5l.png)
+
+代码演示：
+```html
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .all{
+            height:600px;
+            width: 970px;
+            margin: auto;
+        }
+        .top{
+            width: 970px;
+            height: 103px;
+            margin-bottom: 8px;
+            float: left;
+        }
+        .top1{
+            width: 277px;
+            height: 103px;
+            float: left;
+            background-color: red;
+        }
+        .top2{
+            width: 137px;
+            height: 49px;
+            float: right;
+            background-color: green;
+        }
+        .top3{
+            width: 679px;
+            height: 46px;
+            float: right;
+            background-color: green;
+            margin-top: 8px;
+        }
+        .center{
+            width: 970px;
+            height: 435px;
+            float: left;
+        }
+        .center1{
+            width: 310px;
+            height: 435px;
+            background-color: yellow;
+            float: left;
+        }
+        .center2{
+            width: 660px;
+            height: 410px;
+            float: left;
+        }
+        .ce1{
+            width: 450px;
+            height: 410px;
+            margin-left: 10px;
+            float: left;
+        }
+        .c1{
+            width: 450px;
+            height: 240px;
+            background-color: rgb(135,207,235);
+            float: left;
+            margin-bottom: 10px;
+        }
+        .c2{
+            width: 450px;
+            height: 110px;
+            float: left;
+            background-color: rgb(135,207,235);
+            margin-bottom: 10px;
+        }
+        .c3{
+            width: 450px;
+            height: 30px;
+            float: left;
+            background-color: rgb(135,207,235);
+        }
+        .c4{
+            width: 190px;
+            height: 400px;
+            background-color: purple;
+            margin-left: 10px;
+            float: left;
+        }
+        .center3{
+            width: 650px;
+            height: 25px;
+            float: right;
+            background-color: blue;
+        }
+        .bottom{
+            height: 44px;
+            width: 970px;
+            float: left;
+            background-color: rgb(218,165,32);
+            margin-top: 10px;
+        }
+        </style>
+</head>
+<body>
+    <div class="all">
+        <div class="top">
+            <div class="top1">log</div>
+            <div class="top2">语言选择</div>
+            <div class="top3">导航栏</div>
+        </div>
+        <div class="center">
+            <div class="center1"></div>
+            <div class="center2">
+                <div class="ce1">
+                    <div class="c1"></div>
+                    <div class="c2"></div>
+                    <div class="c3"></div>
+                </div>
+                <div class="c4"></div>
+            </div>
+            <div class="center3"></div>
+        </div>
+        <div class="bottom"></div>
+    </div>
+</body>
+</html>
+```
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250.html"
index 3723e23552521c229d767df33dac9d21fb410f1f..b5ed38d27405829765e8b40181f6d801aa394f72 100644
--- "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250.html"
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241012-\351\200\211\346\213\251\345\231\250.html"
@@ -80,6 +80,13 @@
         .table bento:first-child{
             color: aqua;
         }
+<<<<<<< HEAD
+        /* 选择第一个apple */
+        .table apple:first-child{
+            color: black;
+        }
+        /* 选择序号为偶数的plate */
+=======
         /* 20.选择第一个apple */
         .table apple:first-child{
             color: black;
@@ -93,6 +100,7 @@
             color: pink;
         }
         
+>>>>>>> c423215e852f841ff29a8b9f218ae6f67866efb9
     </style>
 </head>
 <body>
@@ -325,6 +333,14 @@
         </div>
         <!-- ================================= -->
         <div class="table">
+<<<<<<< HEAD
+            <plate />
+            <plate />
+            <plate />
+            <plate />
+            <plate id="fancy" />
+            <plate />
+=======
             <plate id="fancy">
                 <apple class="small" />
                 <apple />
@@ -344,6 +360,7 @@
             <pickle />
             <apple class="small" />
             <apple class="small" />
+>>>>>>> c423215e852f841ff29a8b9f218ae6f67866efb9
         </div>
 </body>
 </html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/1.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4ad03fb692ac161e7a3da75db4d87f82e7c84d45
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/1.html"
@@ -0,0 +1,46 @@
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <!-- 请写出CSS规则，使得.main类中的<section>和<article>元素中的所有<h1>和<h2>标签的字体变为粗体， 
+        并且<aside>类中的<h3>标签的字体变为斜体。 -->
+  <style>
+    .main section h1,
+    .main section h2,
+    .main article h1,
+    .main article h3 {
+      font-weight: bolder;
+    }
+
+    aside h3 {
+      font-style: italic;
+    }
+
+  
+  </style>
+</head>
+
+<body>
+  <div class="main">
+    <section id="intro">
+      <h1>Welcome</h1>
+      <p>This is the introduction section.</p>
+    </section>
+    <article class="post">
+      <h2>Post Title</h2>
+      <p>Post content...</p>
+      <ul>
+        <li>Item 1</li>
+        <li>Item 2</li>
+      </ul>
+    </article>
+    <aside class="sidebar">
+      <h3>Sidebar Title</h3>
+      <p>Sidebar content...</p>
+    </aside>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/2.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f17f0f0c474d853a1aee7b9837924e4c710678c7
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/2.html"
@@ -0,0 +1,24 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        /* 请写出CSS规则，使得所有带有required属性的<input>元素在获得焦点时边框变为蓝色，
+        并且所有带有placeholder属性的<input>元素的占位符文本颜色为灰色。 */
+        input[required]:focus{
+            border:3px solid blue;
+        }
+        ::placeholder{
+            color: gray;
+        }
+    </style> 
+</head>
+<body>
+    <form>
+        <input type="text" name="username" required placeholder="Username">
+        <input type="email" name="email" required placeholder="Email">
+        <input type="submit" value="Submit">
+      </form>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/3.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/3.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d7fee3afcd031855a6629c43a21b248e9ac1383c
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/3.html"
@@ -0,0 +1,26 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <!-- 请写出CSS规则，使得导航栏中当前激活的链接（class="active"）的子元素<a>在悬停时背景色变为深灰色，并且所有<a>标签的子元素在悬停时字体颜色变为白色。 -->
+        <style>
+            a.active:hover{
+                background-color:grey;
+            }
+            a:hover{
+                color: white;
+            }
+        </style>
+</head>
+<body>
+    <nav>
+        <ul>
+          <li><a href="#home" class="active">Home</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#services">Services</a></li>
+          <li><a href="#contact">Contact</a></li>
+        </ul>
+      </nav>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/4.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/4.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c9ab8864a4258ed409303c43e0fc5452bd7b6fc4
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/4.html"
@@ -0,0 +1,20 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+    /* 请写出CSS规则，使得带有class="special-title"的<h2>标签的第一个字母首字下沉，并且首字下沉的字母颜色为金色，背景色为透明。 */
+        h2.special-title:first-child::first-letter{
+                color:gold;
+                font-size: 2em;
+                float: left;
+                margin: 0 .2em 0 0;
+                background-color: transparent;
+            }
+    </style>
+</head>
+<body>
+    <h2 class="special-title">Special Title</h2>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/5.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/5.html"
new file mode 100644
index 0000000000000000000000000000000000000000..5a494df9f7727e7ff3cc29d10c6e31e7ce1d8ca0
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/5.html"
@@ -0,0 +1,32 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        /* 请写出CSS规则，使得.list类中的每个<li>元素的第一个子元素<ul>的背景色为浅灰色，并且当鼠标悬停在<li>元素上时，其所有子元素的字体颜色变为深蓝色。 */
+        .list li ul:first-child{
+            background-color: darkgray;
+        }
+        li:hover{
+            color: darkblue;
+        }
+    </style>
+</head>
+<body>
+    <ul class="list">
+        <li>Item 1
+          <ul>
+            <li>Subitem 1</li>
+            <li>Subitem 2</li>
+          </ul>
+        </li>
+        <li>Item 2
+          <ul>
+            <li>Subitem 3</li>
+            <li>Subitem 4</li>
+          </ul>
+        </li>
+      </ul>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/6.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/6.html"
new file mode 100644
index 0000000000000000000000000000000000000000..312a031b0d2ba2f0abc90df883c0a6ec76d0b8fd
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241014-\344\274\252\347\261\273\347\273\203\344\271\240/6.html"
@@ -0,0 +1,27 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        /* 请写出CSS规则，使得.container类中的<form>元素内的所有输入框在获得焦点时边框颜色变为绿色，并且所有标签<label>在悬停时背景色变为浅蓝色。 */
+        .container form :focus{
+            border: 3px solid green;
+        }
+        label:hover{
+            background-color:aqua;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <form>
+          <label for="name">Name:</label>
+          <input type="text" id="name" name="name">
+          <label for="password">Password:</label>
+          <input type="password" id="password" name="password">
+          <button type="submit">Submit</button>
+        </form>
+      </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241016-\347\233\222\346\250\241\345\236\213.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241016-\347\233\222\346\250\241\345\236\213.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c9d5dd9b7ef44410601cd5b1b32f4e7b8f3659a4
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241016-\347\233\222\346\250\241\345\236\213.html"
@@ -0,0 +1,35 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        div.c1 {
+            width: 123px;
+            height: 123px;
+            margin: 0px;
+            border: 1px solid black;
+            padding: 20px 40px 20px 40px;
+        }
+
+        div.c2 {
+            width: 123px;
+            height: 123px;
+            padding: 20px 40px 20px 20px;
+            margin: 0px;
+            border: 1px solid black;
+        }
+    </style>
+</head>
+
+<body>
+
+</body>
+<!-- 二十四 -->
+<!-- 3 -->
+<div class="c1"></div>
+<!-- 4 -->
+<div class="c2"></div>
+
+</html>
\ No newline at end of file
diff --git "a/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250.html" "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0589369c84cd95b3e397a586d1871693315e602d
--- /dev/null
+++ "b/\346\235\250\346\210\220\350\261\252/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250.html"
@@ -0,0 +1,214 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .all{
+            height:600px;
+            width: 970px;
+            margin: auto;
+        }
+        .top{
+            width: 970px;
+            height: 103px;
+            margin-bottom: 8px;
+            float: left;
+        }
+        .top1{
+            width: 277px;
+            height: 103px;
+            float: left;
+            background-color: red;
+        }
+        .top2{
+            width: 137px;
+            height: 49px;
+            float: right;
+            background-color: green;
+        }
+        .top3{
+            width: 679px;
+            height: 46px;
+            float: right;
+            background-color: green;
+            margin-top: 8px;
+        }
+        .center{
+            width: 970px;
+            height: 435px;
+            float: left;
+        }
+        .center1{
+            width: 310px;
+            height: 435px;
+            background-color: yellow;
+            float: left;
+        }
+        .center2{
+            width: 660px;
+            height: 410px;
+            float: left;
+        }
+        .ce1{
+            width: 450px;
+            height: 410px;
+            margin-left: 10px;
+            float: left;
+        }
+        .c1{
+            width: 450px;
+            height: 240px;
+            background-color: rgb(135,207,235);
+            float: left;
+            margin-bottom: 10px;
+        }
+        .c2{
+            width: 450px;
+            height: 110px;
+            float: left;
+            background-color: rgb(135,207,235);
+            margin-bottom: 10px;
+        }
+        .c3{
+            width: 450px;
+            height: 30px;
+            float: left;
+            background-color: rgb(135,207,235);
+        }
+        .c4{
+            width: 190px;
+            height: 400px;
+            background-color: purple;
+            margin-left: 10px;
+            float: left;
+        }
+        .center3{
+            width: 650px;
+            height: 25px;
+            float: right;
+            background-color: blue;
+        }
+        .bottom{
+            height: 44px;
+            width: 970px;
+            float: left;
+            background-color: rgb(218,165,32);
+            margin-top: 10px;
+        }
+        .two{
+            width: 600px;
+            height: 160px;
+            margin: auto;
+            border-top: 1px dashed rgb(213,213,213);
+            margin-top: 20px;
+        }
+        .two1{
+            width:600px;
+            height: 40px;
+            margin-top: 10px;
+            background-color: rgb(249,249,249);
+            float: left;
+        }
+        .t1{
+            width: 3px;
+            height: 20px;
+            background-color: rgb(0,19,94);
+            float: left;
+            margin-top: 8px;
+        }
+        .t2{
+            margin-top: 7px;
+            float: left;
+            padding-left: 6px;
+            color: rgb(0,24,81);
+            font-weight: bolder;
+        }
+        .t3{
+            float: right;
+            font-size: 12px;
+            padding-top: 21px;
+            color: rgb(0,24,81);
+            font-weight: bolder;
+        }
+        .two2{
+            background-image: linear-gradient(to right,rgb(0,24,81),red);
+            width: 600px;
+            height: 3px;
+            float: left;
+        }
+        .two3{
+            width: 600px;
+            height: 40px;
+            border-bottom: 1px dashed rgb(213,213,213);
+            float: left;
+        }
+        .tt1{
+            width: 0px;
+            height: 0px;
+            border: 5px solid transparent;
+	        border-left-color:rgb(0,24,81);
+            margin-top: 20px;
+            float: left;
+        }
+        .tt2{
+            float: left;
+            margin-top: 14px;
+            color: rgb(0,24,81);
+            font-weight: bold;
+            font-size: 15px;
+        }
+        .tt3{
+            float: right;
+            font-size: 15px;
+            font-weight: bold;
+            margin-top: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div class="all">
+        <div class="top">
+            <div class="top1">log</div>
+            <div class="top2">语言选择</div>
+            <div class="top3">导航栏</div>
+        </div>
+        <div class="center">
+            <div class="center1"></div>
+            <div class="center2">
+                <div class="ce1">
+                    <div class="c1"></div>
+                    <div class="c2"></div>
+                    <div class="c3"></div>
+                </div>
+                <div class="c4"></div>
+            </div>
+            <div class="center3"></div>
+        </div>
+        <div class="bottom"></div>
+    </div>
+    <div class="two">
+        <div class="two1">
+            <div class="t1"></div>
+            <div class="t2">通知公告</div>
+            <div class="t3">更多>></div>
+        </div>
+        <div class="two2"></div>
+        <div class="two3">
+            <div class="tt1"></div>
+            <div class="tt2">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
+            <div class="tt3">2014年9月28日</div>
+        </div>
+        <div class="two3">
+            <div class="tt1"></div>
+            <div class="tt2">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
+            <div class="tt3">2014年9月28日</div>
+        </div>
+        <div class="two3">
+            <div class="tt1"></div>
+            <div class="tt2">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
+            <div class="tt3">2014年9月28日</div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file