前端HTML5+CSS3静态页面开发-博文尚美

前端html5+css3静态页面开发-博文尚美

项目介绍
博文尚美是一个设计网站, 此项目由html + css 布局完成页面，对前端基础知识的入门及掌握有非常好的提升效果，对html和css的使用及布局的体验能够建立起强大的信心。

项目相关知识点
HTML + CSS
盒子模型 + 浮动 + 定位
部分H5标签和C3属性

项目演示图

实现步骤
1.在新建 index.html 中，创建基本框架，在标签里面使用标
签引入 index.css。

我们要注意的是，引入外部css时，路径一定要写正确，否则将没有css样式修饰。

2.清除 css 默认样式，添加预设样式。代码如下：

（1）这里的padding:0; margin:0; 是为了清除浏览器自带的边距，从而更好的编写自己的页面。
（2）设置标签属性是为了在后边的代码中可以直接引用甚至好的样式，从而达到自己理想的样式。
（3）color:inherit; 这个属性是强制继承它父类的颜色，如果不强制继承的话，后面实现导航栏时，导航栏的颜色和css中设置的颜色不一样。

3.编写 header 部分 html 框架。代码如下：

4.打开 index.css，编写 header 部分的 css 样式。代码如下：

5.banner 部分的制作。代码如下：

6.为 banner 模块添加 css 样式。代码如下：

left: 50%;
transform: translateX(-50%);
这个css属性可以实现水平居中。

7.服务范围、客户案例、最新资讯、footer部分的制作。代码如下：
服务范围部分：

客户案例部分：

最新资讯部分：

footer部分：

这里要注意，这些部分需要使用公共样式，所以我们一定要注意公共样式代码的编写。代码如下：

8.为以上几部分添加css 样式。
服务范围css样式。代码如下：

这里要注意的一点是：
如果是绝对定位的话：设置position：absolute；之后要设置位置（top bottom left right）
设置左右对称图案的时候先设置左边的css样式还要设置右边的css样式为right：0；否则会与左侧的图案重叠。

客户案例css样式。代码如下：

这里可能会遇到的问题就是四个div不是横向显示的而是纵向显示
这时我们该怎么解决呢？
设置漂浮就解决了问题还有就是如果div宽度固定 div里边的内容宽度超出外边div宽度的话就会错行显示

最新资讯css样式。代码如下：

footer部分css样式。代码如下：

到这里我们的博文尚美项目就成功完成了，大家是否能实现自己理想的效果呢？一起动手操作吧！

前端HTML5+CSS3静态页面开发-博文尚美相关推荐

前端HTML5+CSS3静态页面开发-京东首页
前端html5+css3静态页面开发-京东首页项目介绍 (1)京东首页项目由html + css 布局完成页面,对前端基础知识的入门及掌握有非常好的提升效果,本项目旨在教授HTML和CSS的基础知识 ...
python 50 前端 html5 css3
1 # 前端 2 3 接下来我们进入前端知识的学习,前端的学习目的就是为我们开发的应用程序提供一个与用户进行交互的界面,前端分为HTML5.CSS3.JavaScript三大部分,我们学习内容共分 ...
尚硅谷新版Web前端HTML5+CSS3知识点集合篇【p1-p8】
尚硅谷新版Web前端HTML5+CSS3知识点集合笔记篇尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版(初学者零基础入门) p1(22:55) 一.软件的分类: 1.系统软件 -wind ...
超棒的HTML5/CSS3单页面响应式模板（支持Bootstrap）
在线演示使用Bootstrap实现的响应式单页面模板. 桌面效果: 移动设备效果: 阅读全文:超棒的HTML5/CSS3单页面响应式模板(支持Bootstrap)
Web前端html5+css3前端开发入门学习笔记
文章目录前言 HTML 认识HTML 1. 网页组成和本质 2.了解浏览器 3.web标准 4.HTML感知 5.HTML骨架 6.编译软件vscode的简介和使用 7.注释 8.标签组成和关系 9 ...
前端 html5 css3 框架,UI,分享,CSS3,HTML5,前端框架
随着HTML5和CSS3以及网页设计布局的全面翻新创新改革.让很多网页设计者和界面设计师都知道一个道理.就是去掌握一套对应的工具包.这不仅仅是未来提高工作的效率,还能更好的去处理网页整体视觉效果.界面 ...
前端HTML5+CSS3学习笔记
HTML5+CSS3学习笔记 ==CSS第一天== 一.css简介二.css语法规范三.css代码风格四.css选择器的作用五.css基础选择器 1.标签选择器: 2.类选择器 3.多类名选择 ...
显示外部页面_前端设计-响应式页面开发基础
随着终端设备类型的丰富,设备尺寸的型号也越来越多,如果实现前端页面在不同终端设备中,按照设备的尺寸型号进行自动布局,保证良好的人际交互体验效果,已经成为网页前端设计所需要考虑的问题,当前支持响应式开发 ...
html网站开发实用技术,HTML5+CSS3+JavaScript网站开发实用技术（第2版）简介，目录书摘...
编辑推荐: (1)知识全面,内容覆盖了HTML+CSS+JavaScript的主要内容 (2)案例丰富,全书的知识点融于200个案例之中,并结合典型案例进行讲解和拓展 (3)易学易用,本书提供全部的代 ...

前端HTML5+CSS3静态页面开发-博文尚美

前端html5+css3静态页面开发-博文尚美

前端HTML5+CSS3静态页面开发-博文尚美相关推荐

最新文章

热门文章