百度前端学院第7-8天(2)，设计稿的实现

最新推荐文章于 2024-10-01 21:51:05 发布

weixin_user911

最新推荐文章于 2024-10-01 21:51:05 发布

阅读量103

点赞数

文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_43274526/article/details/105521509

版权

在这里插入图片描述 # 百度前端学院第7-8天(2)

任务实现:

html

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <link rel="stylesheet" href="css/style1-1.css">
</head>

<body>
 <!-- 头部 -->
 <header>
   <div id="header-wrap" class="wrap">
     <h1>logo</h1>
     <ul>
       <li><a href="#">Github</a></li>
       <li><a href="#">Register</a></li>
       <li><a href="#">Login</a></li>
     </ul>
   </div>
 </header>

 <!-- Banner -->
 <section>
   <div id="banner-wrap" class="wrap">
     <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
     </ul>
   </div>
 </section>
 <!-- 导航区域 -->
 <nav>
   <div id="nav-wrap" class="wrap">
     <ul>
       <li>HOME</li>
       <li>PROFILE</li>
       <li>ABOUT</li>
     </ul>
   </div>
 </nav>
 <!-- 主要内容区 -->
 <main>
   <div id="main-wrap" class="wrap">
     <article class="main-article">
       <p> This is an article</p>
     </article>
     <article class="main-article">
       <p> This is an article2</p>
     </article>
     <article>
       <p>content3</p>
     </article>
     <article>
       <p>content4</p>
     </article>
     <article>
       <p>content5</p>
     </article>
     <article>
       <p>content6</p>
     </article>
     <article>
       <p>content7</p>
     </article>
     <article>
       <p>content8</p>
     </article>
     <article>
       <p>content9</p>
     </article>
     <article>
       <p>content10</p>
     </article>
   </div>
 </main>

 <!-- 底部 -->
 <footer>
   <p>&copy; 2018 ife,baidu.com</p>
 </footer>
</body>

</html>

body,
h1,
ul,
p,
a {
 margin: 0;
 padding: 0;
 font: 400 14px/1.5 sans-serif;
 /* 
 font-weight:400;
 font-size: 14px;
 line-height: 1.5em;
 font-family: sans-serif;
  */
}

ul {
 list-style: none;
}

/* 公共元素样式 */
body {
 /* 设置最小宽度，避免页面错乱 */
 min-width: 1000px;
}

/* 既具有block的宽度高度特性又具有inline的同行特性。 */
li {
 display: inline-block;
}


.wrap {
 /* 居中处理 */
 margin: 0 auto;
 width: 960px;
}

/* 头部样式 */
header {
 background-color: #323232;
}

#header-wrap {
 height: 80px;
}

h1 {
 display: inline-block;
 line-height: 80px;
 font-size: 30px;
 color: #fff;
}

#header-wrap ul {
 float: right;
 padding-top: 10px;
}

#header-wrap li {
 margin-left: 10px;
}

#header-wrap a {
 color: #fff;
}

/* banner的样式 */
section {
 background-color: #32cd32;
}

#banner-wrap {
 position: relative;
 height: 300px;
}

#banner-wrap ul {
 position: absolute;
 right: 0;
 bottom: 10px;
}

#banner-wrap li {
 padding: 4px 8px;
 border: 1px solid #696969;
 color: #696969;
 background-color: #90ee90;
}

#banner-wrap li:nth-of-type(2) {
 padding-top: 18px;
 background-color: #f0fff0;
}

/* 导航栏的样式 */
#nav-wrap {
 position: relative;
 height: 70px;
}

#nav-wrap ul {
 position: absolute;
 bottom: -1px;
 font-size: 0;
 /*消除inline-block元素之间的空白空间*/
}

#nav-wrap li {
 padding: 14px 25px 8px;
 border: 1px solid #c0c0c0;
 /* 边框圆角 */
 border-radius: 15px 15px 0 0;
 font-size: 14px;
 background-color: #e6e6e6;
}

/* nth-of-type:按照类型来计算 */
#nav-wrap li:nth-of-type(1) {
 border-bottom: 1px solid #fff;
 background-color: #fff;
}

/* 主体的样式 */
#main-wrap {
 display: flex;
 /* 允许子元素换行 */
 flex-wrap: wrap;
 padding-bottom: 20px;
}

article {
 flex: 1;
 margin-top: 10px;
 margin-right: 10px;
 padding: 80px;
 border: 1px solid #c0c0c0;
 text-align: center;
}

.main-article {
 flex: 100px;
 /* flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 100px; 
   基本长度*/

}

/* 尾部样式 */
footer {
 padding-top: 15px;
 height: 100px;
 background-color: #808080;
}

footer p {
 text-align: center;
 color: #fff;
}