百度前端技术学院-基础-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春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...
随机推荐
- JS小案例：循环间隔重复变色
在A.B.C三个区块中,有且仅有一个红色,要求红色每隔一秒即进入下一个区块,变色过程不断循环往复. 参考代码: <!DOCTYPE html> <html lang="zh ...
- 基于FFmpeg的Dxva2硬解码及Direct3D显示（三）
初始化Direct3D 目录 初始化Direct3D 创建Direct3D物理设备对象实例 创建Direct3D渲染设备实例 创建Direct3D视频解码服务 Direct3D渲染可以通过Surfac ...
- 利用matlibplot绘制雷达图
之前在一些数据分析案例中看到用 Go 语言绘制的雷达图,非常的漂亮,就想着用matlibplot.pyplot也照着画一个,遗憾的是matlibplot.pyplot模块中没有直接绘制雷达图的函数,不 ...
- mysql建立索引，实际工作中建立索引的示例
1.根据业务场景建立相应的组合索引,一般是在主键,外键,常用来筛选查询的字段,按照字段之间组合的紧密程度,建立一定顺序的索引. 例如:为 t_org_exam_join_member_day 建立索 ...
- 卸载python安装的软件
python源码安装的软件是无法通过命令卸载的,这个可以通过记录安装过程的形式来卸载安装的软件 以 python2.7.2 为例,在这个目录中有一个 setup.py 的文件,很显然这是安装程序,还是 ...
- CSS3之flex布局
若要使用flex布局,需在父元素上声明" display : flex ",这样它所有的直系子元素就成为flex元素 1.居中 1)垂直居中:align-items : cente ...
- 学习笔记:[算法分析]数据结构与算法Python版[基本的数据结构-上]
线性结构Linear Structure ❖线性结构是一种有序数据项的集合,其中 每个数据项都有唯一的前驱和后继 除了第一个没有前驱,最后一个没有后继 新的数据项加入到数据集中时,只会加入到原有 某个 ...
- [web安全原理]PHP命令执行漏洞基础
前言 PHP命令执行漏洞 应用程序的某些功能功能需要调用可以执行系统命令的函数,如果这些函数或者函数的参数被用户控制,就有可能通过命令连接符将恶意命令拼接到正常的函数中,从而随意执行系统命令,这就是命 ...
- 几分钟看懂EasyRecovery数据恢复原理，比我想象的简单易懂得多
可能很多人知道使用数据恢复软件EasyRecovery可以恢复丢失的数据,但是却不知道它是什么原理.现在我们就以硬盘数据恢复为例,一起来了解下EasyRecovery数据恢复原理. 当硬盘数据丢失后, ...
- Go-Web编程_表单_0x02_验证表单的输入
开发Web的一个原则就是,不能信任用户输入的任何信息,所以验证和过滤用户的输入信息就变得非常重要,我们经常会在微博.新闻中听到某某网站被入侵了,存在什么漏洞,这些大多是因为网站对于用户输入的信息没有做 ...