博文尚美练习
WEB前端开发博文尚美文档
Ps切图的基本操作 ..............................................1
header部分制作 .............................................. 2
banner部分制作 ...............................................3
服务范围部分制作 ............................................. 4
客户案例部分制作 ............................................... 5
最新资讯部分制作 ............................................. 6
Footer部分制作 ..................................................7
全部成果展示 ..................................................8
项目开发工具选用
（1）本项目旨在教授HTML和CSS的基础知识，提升基础技能，使用的工具可以是简单的代码编辑工具，这里使用VSCode（Visual Studio Code）进行项目代码的编辑。
（2）VSCode的下载地址：https://code.visualstudio.com/，根据自己的电脑下载对应的版本，按照默认的安装进程将工具安装好。
（1）首先，右击桌面空白区域
然后点击create folder
在此处修改命名为博文尚美
然后打开文件夹新建一个文件命名为index.html，然后依次新建font文件夹和CSS文件夹还有images文件夹，将所需素材放入images文件夹内在CSS文件中新建base.css和index.css文件
然后我们需要把博文网页的图标，放入我们博文尚美的文件夹中，还要把字体文件一并导入到本项目中然后右击桌面空白处按照下列操作打开vscode编辑器
最后通过vscode打开我们刚才所建的文件夹
第一部分Ps切图的基本操作
任务一了解ps的基本操作
任务描述:
主要认识一些ps的基本操作
操作内容:
调出标尺：ctrl+r
调整单位：编辑→首选项→单位与标尺 修改单位为像素。
图片放大：鼠标滚轮上下滚动即可
图片上下移动：alt+鼠标滚轮上下滚动
图片左右移动：ctrl+alt+鼠标滚轮上下滚动
取色：工具栏点击吸管工具或者在英文状态下键盘i键
获取文字大小和字体：工具栏横排文字工具或者英文状态下键t键
第二部分header部分制作
任务二 网站header部分的制作
操作实施:
1在电脑上任何一个磁盘内新建名为 “博文尚美” 的文件夹。
2打开下载好的visual studio code，将文件夹拖到visual studio code中
3新建index.html文件，新建index.css文件。
4新建images文件夹，将提供的图片放到images文件夹中。
5在新建index.html中，创建基本框架，在<head>标签里面使用<link>标签引入index.css。
如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博文尚美</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
2清除css 默认样式，添加预设样式。
写道index.css里面
如下所示:
* {
padding: 0;
margin: 0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
img{
display: block;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix::after{
content: "";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
.center{
width: 1090px;
margin: 0 auto;
}
- 编写header部分html框架。将以下代码添加到<body>后面
如下所示:
<!-- header -->
<div class="header center">
<div class="logo fl">
<img src="./images/logo.png" alt="">
</div>
<ul class="nav fr">
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">PROTFOLIO</a></li>
<li><a href="">SERVICE</a></li>
<li><a href="">NEWS</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
- 打开index.css，写出header部分的css样式
如下所示:
.header{
height: 60px;
padding-top: 20px;
}
.header .logo{
width: 167px;
height: 44px;
}
.header .nav{
width:690px;
color: #646464;
font-size: 14px;
}
.header .nav > li{
float: left;
margin-left: 50px;
line-height: 44px;
}
第二部分的成果展示
第三部分banner部分制作
操作实施:
1. 在header后面新建一个class为banner的div。
<div class="banner">
</div>
2. 在class为banner标签中加入以下代码
<ul>
<li>
<img src="./images/banner.png" alt="">
</li>
</ul>
<ol class="banner-list">
<li></li>
<li class="active"></li>
<li></li>
<li></li>
</ol>
3. 为banner模块添加css样式，将以下样式，写在index.css文件中。
.banner{
position: relative;
}
.banner > ul img{
width: 100%;
}
.banner .banner-list{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.banner .banner-list li{
height: 8px;
width: 8px;
border-radius: 50%;
border:2px solid #fff;
float: left;
margin:0 6px;
}
.banner .banner-list .active{
}
第三部分的成果展示；
第四部分服务范围部分制作
操作实施:
- 新建class为section1的div,创建好的div放到banner后面。
<div class="section1">
</div>
- 在class为banner的标签中添加以下代码
<div class="section-header">
<div class="section-header-box">
<div class="section-header-left"></div>
<div>服务范围</div>
<div class="section-header-right"></div>
</div>
<p class="section-header-title">our services</p>
</div>
<div class="section1-content clearfix center">
<div class="list">
<img src="./images/section1-img1.png" alt="">
<p class="text1">1.WEB DESIGN</p>
<P class="text2">企业品牌网站设计/手机网站制作
动画网站创意设计</P>
</div>
<div class="list">
<img src="./images/section1-img2.png" alt="">
<p class="text1">1.WEB DESIGN</p>
<P class="text2">标志logo设计/产品宣传册设计
企业广告/海报设计</P>
</div>
<div class="list">
<img src="./images/section1-img3.png" alt="">
<p class="text1">1.WEB DESIGN</p>
<P class="text2">淘宝/天猫装修设计及运营推广
企业微博、微信营销</P>
</div>
<div class="list">
<img src="./images/section1-img4.png" alt="">
<p class="text1">1.WEB DESIGN</p>
<P class="text2">腾讯/网易企业邮箱品牌代理
个性化邮箱定制开发</P>
</div>
</div>
3.为section1添加css样式，在index.css中添加以下样式
.section-header{
text-align: center;
}
.section-header-box{
width: 350px;
margin: 0 auto;
position: relative;
font-size: 20px;
color: #363636;
}
.section-header-box .section-header-left,.section-header-right{
width: 100px;
height: 1px;
position: absolute;
top: 15px;
background:#c3c3c3;
}
.section-header-box .section-header-right{
right: 0;
}
.section-header-left::after,.section-header-right::after{
content: "";
position: absolute;
width: 9px;
height: 9px;
border-radius: 50%;
background:#c3c3c3;
top:-4px;
}
.section-header-left::after{
right: 0;
}
.section-header-right::after{
left: 0;
}
.section-header .section-header-title{
color: #c3c3c3;
font-size: 14px;
margin-top: 10px;
}
/* section1 的内容 */
.section1 .section-header{
padding: 60px 0 50px 0;
}
.section1-content > .list{
width: 25%;
float: left;
height: 280px;
text-align: center;
}
.section1-content > .list img{
margin: 0 auto;
}
.section1-content > .list .text1{
font-size: 18px;
color:#434343 ;
padding: 30px 0 20px 0;
font-weight: 700;
}
.section1-content > .list .text2{
font-size: 14px;
color:#6d6d6d ;
width: 205px;
margin: 0 auto;
}
第四部分的成果展示
第五部分客户案例部分制作
操作实施:
1.创建一个class为section2的div，创建好的div放到section1后面，代码如下。
<div class="section2">
</div>
2.为class为section2的添加内容，将以下代买添加到其内部。
<div class="section-header">
<div class="section-header-box">
<div class="section-header-left"></div>
<div>最新资讯</div>
<div class="section-header-right"></div>
</div>
<p class="section-header-title">TEH LATEST NEWS</p>
</div>
<div class="section3-content clearfix center">
<div class="section3-left fl">
<img src="./images/section3.png" alt="">
</div>
<div class="section3-right fr">
<div class="section3-right-box1 clearfix">
<div class="section3-right-item fl">
<div class="section3-right-left fl">
<div class="number">09</div>
Jan
</div>
<div class="section3-right-right fl">
<p class="p1">网站排名进入前三的技巧说明</p>
<p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</div>
<div class="section3-right-item fl">
<div class="section3-right-left fl">
<div class="number">09</div>
Jan
</div>
<div class="section3-right-right fl">
<p class="p1">网站排名进入前三的技巧说明</p>
<p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</div>
</div>
<div class="section3-right-box2 clearfix">
<div class="section3-right-item fl">
<div class="section3-right-left fl">
<div class="number">09</div>
Jan
</div>
<div class="section3-right-right fl">
<p class="p1">网站排名进入前三的技巧说明</p>
<p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</div>
<div class="section3-right-item fl">
<div class="section3-right-left fl">
<div class="number">09</div>
Jan
</div>
<div class="section3-right-right fl">
<p class="p1">网站排名进入前三的技巧说明</p>
<p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="footer">
<div class="center clearfix">
<div class="footer-nav-box fr">
<a href="">Home</a>
<a href="">About</a>
<a href="">Portfolio</a>
<a href="" class="noborder">Contact</a>
</div>
</div>
</div>
- 给客户案例部分添加css样式。
.section2{
background: #f8f8f8;
padding-bottom: 65px;
}
.section2-content{
padding-left: 5px;
width: 1085px;
}
.section2 .section-header-box{
color: #66c5b4;
}
.section2-content .list{
float: left;
margin: 0 10px;
}
.section2 .more{
display: block;
margin: 0 auto;
text-align: center;
width: 178px;
line-height: 38px;
background:#66c5b4;
color: #fff;
font-size: 14px;
border-radius: 100px;
margin-top: 37px;
}
.section2 .section-header{
padding: 55px 0 40px 0;
}
第五部分的成果展示
第六部分最新资讯部分制作
操作实施:
- 创建一个class为section3的div，将创建好的div放到section2后面，代码如下。
<div class="section3">
</div>
2.为class为section3的添加内容，代码如下。
<div class="section-header">
<div class="section-header-box">
<div class="section-header-left"></div>
<div>最新资讯</div>
<div class="section-header-right"></div>
</div>
<p class="section-header-title">TEH LATEST NEWS</p>
</div>
<div class="section3-content clearfix center">
<div class="section3-left fl">
<img src="./images/section3.png" alt="">
</div>
<div class="section3-right fr">
<div class="section3-right-box1 clearfix">
<div class="section3-right-item fl">
<div class="section3-right-left fl">
<div class="number">09</div>
Jan
</div>
<div class="section3-right-right fl">
<p class="p1">网站排名进入前三的技巧说明</p>
<p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</div>
<div class="section3-right-item fl">
<div class="section3-right-left fl">
<div class="number">09</div>
Jan
</div>
<div class="section3-right-right fl">
<p class="p1">网站排名进入前三的技巧说明</p>
<p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</div>
</div>
<div class="section3-right-box2 clearfix">
<div class="section3-right-item fl">
<div class="section3-right-left fl">
<div class="number">09</div>
Jan
</div>
<div class="section3-right-right fl">
<p class="p1">网站排名进入前三的技巧说明</p>
<p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</div>
<div class="section3-right-item fl">
<div class="section3-right-left fl">
<div class="number">09</div>
Jan
</div>
<div class="section3-right-right fl">
<p class="p1">网站排名进入前三的技巧说明</p>
<p class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
首页，更不用说进首页前三了。那么网站优...</p>
</div>
</div>
</div>
</div>
</div>
3.给最新资讯部分添加css样式。代码如下
.section3{
padding-bottom: 88px;
}
.section3 .section-header{
padding: 65px 0 55px 0;
}
.section3-right{
width: 856px;
}
.section3-content .section3-left img{
width: 234px;
}
.section3-right-left{
color: #999999;
font-size: 20px;
width: 73px;
border-right: 1px solid #dcdcdc;
text-align: center;
}
.section3-right-left .number{
font-size: 39px;
color:#66c5b4;
font-weight: 700;
}
.section3-right-right{
width: 328px;
padding-left: 18px;
}
.section3-right-right .p1{
font-size: 14px;
color: #3f3f3f;
}
.section3-right-right .p2{
font-size: 12px;
color: #a4a4a4;
padding-top: 19px;
}
.section3-right-box1{
padding-bottom: 40px;
}
第六部分的成果展示
第七部分footer部分制作
操作实施:
1.创建一个class为footer的div，将创建好的div放到section3后面，代码如下
<div class="footer">
</div>
- 为class为footer的div添加内容，代码如下
<div class="center clearfix">
<div class="footer-nav-box fr">
<a href="">Home</a>
<a href="">About</a>
<a href="">Portfolio</a>
<a href="" class="noborder">Contact</a>
</div>
</div>
- 为footer部分添加css样式。
.footer{
font-size: 12px;
color: #fff;
background: #66c5b4;
padding: 20px 0;
}
.footer-nav-box a{
border-right: 1px solid #fff;
float: left;
padding: 0 18px;
}
.footer .center .noborder{
border: none;
}
第七部分的成果展示
第八全部展示
浙公网安备 33010602011771号