关于我们的静态页面制作
1. html 页面结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="descripttion" content="来到米修在线">
<title>铄洋在线 | 关于我们</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav id="navbar">
<h1><a href="1.html">铄洋在线</a></h1>
<ul>
<li><a href="1.html">首页</a></li>
<li><a class="curread" href="2.html">关于我们</a></li>
<li><a href="3.html">联系我们</a></li>
</ul>
</nav>
</header>
<section id="about-info" class="py bg-light">
<div class="container">
<div class="info-left">
<h1 class="l-heading">关于<span class="text-pranime">铄洋在线</span></h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime dolores sed alias deserunt libero at dicta vero quia omnis error, unde consequatur quod ducimus fuga aliquam voluptatem veniam natus voluptates.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor modi eos aperiam sequi quasi quos architecto sapiente. Dolorem tempora dolor nihil officia, ipsam itaque quaerat asperiores dignissimos sunt eaque nam.</p>
</div>
<div class="info-right">
<img src="img/tuya.jpeg" alt="米修在线">
</div>
</div>
</section>
<section id="testimon">
<div class="container">
<h2 class="l-headding">学员评价</h2>
<div class="testimonial bg-primary">
<img src="img/pexels-photo-247160.jpeg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit eligendi iure neque quibusdam mollitia natus?Lorem ipsum dolLorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit eligendi iure neque quibusdam mollitia natuor sit amet, consectetur adipisicing elit. Reprehenderit eligendi iure neque quibusdam mollitia natu</p>
</div>
<div class="testimonial bg-primary">
<img src="img/pexels-photo-1408221.jpeg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicingLorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit eligendi iure neque quibusdam mollitia natu elit. Reprehenderit eligendi iure neque qLorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit eligendi iure neque quibusdam mollitia natuuibusdam mollitia natus?</p>
</div>
</div>
</section>
<section></section>
<footer id="main-footer">
<p>米修在线 © 2021, All Rights Reaerved</p>
</footer>
</body>
</html>
2.css 样式
/* reset */
/* 重置样式 */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* main styling */
html, body{
font-family: 'Segoe Ul', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.7em;
}
a {
color: #333;
text-decoration: none;
}
h1, h2, h3 {
padding-bottom: 20px;
}
p {
margin: 10px 0;
}
/* utitlity classes */
/* 重点 通用样式 */
.container {
margin: 0 auto;
max-width: 1100px;
overflow: hidden;
padding: 0 20px;
}
.text-pranime {
color: #f7c08a;
}
.bg-dark {
background-color: #444;
color: #ffffff;
}
.clr {
clear: both;
}
.py {
padding: 10px 0;
}
.l-heading {
font-size: 40px;
padding-top: 20px;
}
/* navber */
#navbar {
background-color: #333;
color: #ffffff;
overflow: auto;
}
#navbar a{
color: #ffffff;
}
#navbar h1 {
float: left;
padding-top: 20px;
}
#navbar ul {
float: right;
list-style: none;
}
#navbar ul li{
float: left;
}
#navbar ul li a{
display: block;
padding: 20px;
text-align: center;
}
#navbar ul a:hover,
#navbar ul a.curread{
background-color: #444;
color: bisque;
}
/* showcase */
/* center/cover */
#showcase {
background: url('../img/pexels-abdullah-ghatasheh-1631677.jpg') no-repeat center center/cover;
height: 600px;
}
#showcase .showcase-content {
color: #ffffff;
text-align: center;
padding-top: 170px;
}
#showcase .showcase-content h1 {
font-size: 60px;
line-height: 1.2em;
}
#showcase .showcase-content p {
font-size: 20px;
line-height: 1.7em;
padding-bottom: 20px;
}
.btn {
display: inline-block;
font-size: 18px;
color: #ffffff;
background: #333;
padding: 13px 20px;
}
.btn:hover {
background-color: #f7c08a;
}
.btn-ligin {
background: #f4f4f4;
color: #333;
}
/* home-info */
#home-info {
height: 400px;
}
#home-info .info-img {
float: left;
width: 50%;
/* background: url图片路径 no-repeat不平铺 center居中 center/cover居中并且沾满整个盒子容器(屏幕)*/
background: url('../img/pexels-photo-1590511.jpeg') no-repeat center center/cover;
height: 100%;
}
#home-info .info-content {
float: right;
width: 50%;
height: 100%;
text-align: center;
padding: 50px 30px;
overflow: hidden;
}
#home-info .info-content p{
padding-bottom: 30px;
}
/* features */
.box {
float: left;
width: 33.3%;
padding: 50px;
text-align: center;
}
.box i{
margin-bottom: 10px;
}
.bg-light {
background-color: #f4f4f4;
color: #333;
}
.bg-primary {
background-color: #f7c08a;
color: #333;
}
/* about-info */
#about-info .info-left {
float: left;
width: 50%;
height: 100%;
}
#about-info .info-right {
float: right;
width: 50%;
height: 100%;
}
#about-info .info-right img {
display: block;
width: 80%;
margin: 0 auto;
border-radius: 50%;
}
/* testimonals */
#testimon {
height: 600px;
background: url('../img/pexels-photo-1527934.webp') no-repeat center center/cover;
padding-top: 100px;
}
#testimon h2 {
color: #ffffff;
text-align: center;
padding-bottom: 40px;
}
#testimon .testimonial {
padding: 20px;
margin-bottom: 40px;
border-radius: 5px;
opacity: 0.8;
}
#testimon .testimonial img {
width: 100px;
height: 100px;
border-radius: 50%;
float: left;
margin-right: 20px;
}
/* fppter */
#main-footer {
text-align: center;
background-color: #333;
color: #ffffff;
padding: 20px;
}
3. 重点
css 样式不常用属性
opacity: 0.8; 这个是不透明度 值是0~1
html 结构
header 头部元素
nav 导航元素
section 块区域元素
footer 底部元素
p标签里的骚操作
在 p 标签里输入Lorem(数子)
举例 <p>Lorem30</p>
直接回车
