百度前端技术学院-基础-day7.8
任务：参考如下设计稿实现HTML页面及CSS样式
代码
HTML
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>设计稿1</title>
7 <link rel="stylesheet" href="./design.css">
8 </head>
9 <body>
10 <header>
11 <div class="head">
12 <div class="logo">Logo</div>
13 <div class="link3">
14 <div><a href="#">Github</a></div>
15 <div><a href="#">Regisiter</a></div>
16 <div><a href="#">Login</a></div>
17 </div>
18 </div>
19 </header>
20
21 <div class="banner">
22 <div>
23 <span>1</span>
24 <span>2</span>
25 <span>3</span>
26 <span>4</span>
27 </div>
28 </div>
29
30 <nav>
31 <div class="nav1">
32 <span>HOME</span>
33 <span>PROFILE</span>
34 <span>ABOUT</span>
35 </div>
36 </nav>
37
38 <main>
39 <div class="content-row">
40 <div class="content">
41 <p>This is Content 1</p>
42 </div>
43 <div class="content">
44 <p>content 2</p>
45 </div>
46 <div class="content">
47 <p>content 3</p>
48 </div>
49 </div>
50
51 <div class="content-row">
52 <div class="content">
53 <p>content 4</p>
54 </div>
55 <div class="content">
56 <p>5</p>
57 </div>
58 <div class="content">
59 <p>6</p>
60 </div>
61 <div class="content">
62 <p>7</p>
63 </div>
64 </div>
65
66 <div class="content-row">
67 <div class="content">
68 <p>8</p>
69 </div>
70 <div class="content">
71 <p>9</p>
72 </div>
73 <div class="content">
74 <p>10</p>
75 </div>
76 </div>
77
78 </main>
79
80 <footer>
81 <div>
82 <p>2018 ife.baudu.com</p>
83 </div>
84 </footer>
85 </body>
86 </html>
CSS
1 html, body {
2 margin: 0;
3 width: 100%;
4 height: 100%;
5 font-size: 10px;
6 }
7 header{
8 background-color: rgb(73, 72, 72);
9 color: white;
10 }
11 footer{
12 background-color: rgb(88, 88, 88);
13 height: 70px;
14 text-align: center;
15 color: white;
16 padding-top: 10px;
17 }
18 .head{
19 width: 960px;
20 margin: 0 auto;
21 display: flex;
22 height: 50px;
23 }
24 .head .logo{
25 font-size: 2em;
26 flex: 1;
27 display: flex;
28 align-items: center;
29 }
30 .head .link3{
31 display: flex;
32 font-size: 1em;
33 flex: 1;
34 justify-content: flex-end;
35 margin-top: 5px;
36 }
37 .head a{
38 color: white;
39 margin-right: 10px;
40 display: flex;
41 }
42
43 .banner{
45 background-color: #66BB33;
46 display: flex;
47 padding-top: 300px;
48 padding-left: 70%;
49 padding-bottom: 10px;
50 }
51
52 .banner span{
53 display: inline-block;
54 border: 1px white solid;
55 height: 25px;
56 width: 15px;
57 text-align: center;
58 line-height: 25px;
59 margin-right: 3px;
60 background-color: rgb(255, 255,255);
61 opacity: 0.7;
62 }
63
64 .banner span:nth-of-type(2){
65 padding-top: 6px;
66 opacity: 0.9;
67 }
68
69 nav{
70 border-bottom: #d3d3d3 1px solid;
71 }
72
73 nav .nav1{
74 width: 960px;
75 margin: 0 auto;
76 display: flex;
77
78 }
79
80 nav span{
81 border: 1px lightgray solid;
82 margin-top: 10px;
83 padding: 10px 20px;
84 border-top-left-radius: 16px;
85 border-top-right-radius: 16px;
86
87 }
88
89 nav span:nth-of-type(1){
90 border-left: 1px lightgray solid;
91 border-bottom: white 1px solid;
92 z-index: 999;
93 position: relative;
94 top:1px ;
95
96 }
97 nav span:nth-of-type(2), nav span:nth-of-type(3){
98 background-color: rgb(236, 236, 236);
99 position: relative;
100
101 top:1px ;
102 }
103
104 main{
105 display: flex;
106 width: 960px;
107 margin: 10px 0px 20px 0px;
108 flex-flow: column nowrap;
109 margin: 5px auto 10px;
110 }
111
112 .content-row{
113 display: flex;
114
115 }
116
117 .content-row .content{
118 border: 1px lightgray solid;
119 flex: 1;
120 margin: 3px;
121 min-height: 120px;
122 display: flex;
123 justify-content: center;
124 align-items: center;
125 }
百度前端技术学院-基础-day7.8的更多相关文章
- 百度前端技术学院-基础-day1
2020.9.14 今天我开始在百度前端技术学院学习基础课程. 先立一个Flag,希望我能在30天之内学完前四十天的课程,后续课程再一天一节. 第一天的内容主要是提供了很多基础学习的网页,比如W3sc ...
- 百度前端技术学院-基础-day2
2020.9.15 今天是学习前端基础技术的第二天,今天制作了一个在线简历,纯html的那种.帮助我复习了以前的基础知识,也增加了新的知识点,比如制作列表可以用fieldset来整合数据. 我的在线简 ...
- 百度前端技术学院-基础-day20-21
第二十到第二十一天:让你和页面对话 task1 控制元素的显示及隐藏 实现以下功能: 当用户选择了 School 的单选框时,显示 School 的下拉选项,隐藏 Company 的下拉选项 当用户选 ...
- 百度前端技术学院-基础-day17-18
JavaScript小练习 task 1 基于上一个任务中,关于加减乘除的任务,加上对于特殊情况的判断,比如判断两个输入框是否都是正常输入了数字类型的内容,比如除法的时候除数是否为0,当判断到输入有异 ...
- 百度前端技术学院-基础-day3
2020.9.15 第三天的课程内容,复习了一些CSS的基础属性(果然不用就会忘). 学习了一些新的属性,比如text-shadow.text-indent(还不是很清楚).font-style等等. ...
- 百度前端技术学院-基础-day22-24
第二十二天到第二十四天:JavaScript里面的居民们 task1 题目: <div> <label>Number A:<input id="radio-a& ...
- 百度前端技术学院-基础-day25-27
倒数开始 滴答滴 滴答滴 task1 题目: 我们现在来做一个最简单的时钟,通过小练习来学习 Date,复习定时,然后再练习一下函数的封装具体需求如下: 在页面中显示当前日期及时间,按秒更新 格式为 ...
- 百度前端技术学院-基础-day5.6
今天学习了关于盒模型.浮动等页面布局的方法. 受到同学的启发,顺便学习了flex的布局. 还了解了一些编码的基本规则. 对我接下来的学习帮助很大. 交作业: HTML : https://github ...
- 百度前端技术学院（IFE）2016春季学期总结
今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
随机推荐
- nginx&http 第三章 ngx http ngx_http_process_request_headers
HTTP 请求行正确处理完成后,针对 HTTP/1.0 及以上版本紧接着要做的就是请求 HEADER 的处理与解析了 /** * 用于处理http的header数据 * 请求头: * Host: lo ...
- LOJ #2005. 「SDOI2017」相关分析 线段树维护回归直线方程
题目描述 \(Frank\) 对天文学非常感兴趣,他经常用望远镜看星星,同时记录下它们的信息,比如亮度.颜色等等,进而估算出星星的距离,半径等等. \(Frank\) 不仅喜欢观测,还喜欢分析观测到的 ...
- 调用外部接口支持https请求
1,创建RestTemplateConfig.java文件,内容如下: package com.htsec.monitor.internet.config;import com.htsec.monit ...
- centos7单独编译nbd内核模块
前言 centos7默认内核没有带nbd的模块,可以通过下载跟当前版本匹配的内核源码,编译源码指定的模块,然后加载到系统 步骤 判断版本 [root@lab201 linux-3.10.0-957.e ...
- Design Principle vs Design Pattern 设计原则 vs 设计模式
Design Principle vs Design Pattern设计原则 vs 设计模式 来源:https://www.tutorialsteacher.com/articles/differen ...
- Ubuntu linux系统下 su:出现： authentication failure的解决办法
当出现这个问题后,尝试一下方法: $ sudo passwd rootEnter new UNIX password://此时输入你的密码Retype new UNIX password://再次输入 ...
- 在CorelDRAW2019创建对称绘图模式
对称绘图模式是CorelDRAW 2018推出的全新功能,在2019的版本中又得到了极大的完善,通过对称绘图模式可以创建平衡.和谐.独一无二的效果,对称在大自然中随处可见,因此设计元素很可能将依靠于它 ...
- Ubuntu14.04下安装Composer
下载Composer: curl -sS https://getcomposer.org/installer | php 安装Composer: /usr/bin/php composer.phar ...
- 关于Intege.valueOf()的使用
原文链接:https://blog.csdn.net/weixin_37650458/article/details/85212730 1.Integer. valueOf()方法的作用 In ...
- 一分钟了解 sync、fsync、fdatasync 系统调用
目录 一.缓冲 二.延迟写的优缺点 三.sync.fsync.fdatasync 关注送书!<Netty实战>(今晚开奖) Hi,大家好!我是白日梦. 今天我要跟你分享的话题是:" ...