初学HTML+CSS练习搭建个人博客笔记

最新推荐文章于 2022-11-17 00:19:34 发布

m0_70274796

最新推荐文章于 2022-11-17 00:19:34 发布

阅读量125

点赞数

分类专栏： Web前端文章标签：经验分享前端前端框架

本文链接：https://blog.youkuaiyun.com/m0_70274796/article/details/124494544

版权

Web前端专栏收录该内容

47 篇文章

订阅专栏

成立于1946年的联合国教科文组织旨在通过教育、科学和文化促进国际合作，并为世界和平与安全作出贡献。目前，该组织有195个成员国和58个执行局成员。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标题三

Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.

clearfix">

标题三

clearfix">

标题三

item1
item2
item3
item4
item5
&copy 黄墨一-2017

然后就是对应css代码：

.clearfix:after

{

content: ‘’;

display: block;

clear: both;

}

ul

{

margin: 0;

}

header

{

background: rgba(0,0,0,0.4);

}

nav{

background: transparent;

height: 50px;

}

#banner{

background: transparent;

height: 700px;

}

nav ul{

list-style: none;

margin: 0;

float: right;

}

nav ul li, nav .logo

{

display: inline-block;

line-height: 50px;

margin: 5px;

}

nav ul li a{

line-height: 50px;

text-decoration: none;

display: inline-block;

height: inherit;

color: #fff;

}

nav ul li.logo{

float: left;

padding: 10px;

}

#banner .inner

{

max-width: 300px;

text-align: center;

margin: 0 auto;

position: relative;

top: 160px;

}

#banner .inner h1

{

margin: 0;

color: #fff;

}

button

{

border: none;

background: #089DB0;

color: #eee;

}

#banner button

{

padding: 14px 60px;

}

#banner .inner .more

{

margin-top: 280px;

color: #fff;

}

.sub-heading

{

line-height: 30px;

margin 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源徽信搜索公众号【编程进阶路】 : 30px 0;

color: #fff;

}

.logo

{

font-size: 20px;

font-weight: 700;

letter-spacing: 1px;

}

.logo a

{

color: #fff;

}

h2

{

font-size: 30px;

}

h3

{

font-size: 24px;

}

p

{

font-size: 18px;

letter-spacing: 1px;

}

.hr

{

width: 100%;

height: 2px;

margin: 0 auto;

margin: 20px auto;

}

.sub-heading

{

font-size: 18px;

}

#main-btn

{

padding: 14px 28px;

font-size: 20px;

letter-spacing: 4px;

border-collapse: 6px;

background: #18a;

}

.green-section

{

background: #089DB0;

color: #fff;

text-align: center;

padding: 100px 0px;

}

.green-section .hr

{

background: #079494;

width: 60%;

}

.green-section .icon-group .icon

{

display: inline-block;

width: 80px;

height: 80px;

border: 1px solid #0D6F7C;

transform: rotate(45deg);

margin: 30px;

}

.icon-group

{

margin-top: 60px;

}

.wrapper

{

max-width: 1080px;

margin: 0 auto;

}

.gray-section

{

background: #252F34;

color: #fff;

}

.gray-section .img-section

{

width: 45%;

margin: 0;

}

.img-section img

{

width: 100%

}

.gray-section .text-section

{

width: 55%;

}

.article-preview > div

{

float: left;

font-size: 0;

}

.article-preview:nth-child(odd)

{

background-color: rgba(255,255,255,0.05);

}

.article-preview:after

{

content: ‘’;

display: block;

clear: both;

}

.text-section

{

position: relative;

top: 68px;

left: 50px;

}

.text-section h2

{

margin-bottom: 20px;

}

.text-section .sub-heading

{

font-size: 22px;

margin-top: 0;

}

.text-section p

{

font-size: 18px;

letter-spacing: 1px;

}

.text-section > *{

max-width: 90%;

}

.purple-section

{

padding: 80px;

background: #3F3965;

color: #fff;

}