如何制作PC端静态网页

最新推荐文章于 2022-11-18 21:11:30 发布

我和夏天来了

最新推荐文章于 2022-11-18 21:11:30 发布

阅读量880

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_42306249/article/details/115518138

版权

开发流程

需求分析-》整体规划-》界面设计-》前端程序设计-》前后端系统整合-》测试验收

开发前准备

确定页面版心（常见的版心宽度值包括960px、980px、1000px、1200px等）
版心一般水平居中显示（使用标准流中的margin:0 auto;居中）
分析页面中的行模块，以及每个行模块中的列模块
– 确定布局类型（一列固定宽度且居中、两列左窄右宽型、通栏平均分布型，更多情况下，一个网页中可能同时包括2种以上的布局类型）

开发

制作HTML页面，CSS文件等
- <head>内的设置
  - <title>
  - 标签页icon图标
```
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
```

CSS初始化

清除默认样式的css–reset.css

html {
color:#000;
background:#FFF
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0
}
table {
	border-collapse:collapse;
	border-spacing:0
}
fieldset,img {
	border:0
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal
}
ol,ul {
	list-style:none
}
caption,th {
	text-align:left
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal
}
i,em {
	font-style: normal;
}
q:before,q:after {
	content:''
}
abbr,acronym {
	border:0;
	font-variant:normal
}
sup {
	vertical-align:text-top
}
sub {
	vertical-align:text-bottom
}
input,textarea,select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
	*font-size:100%;
	outline: none;
	border: 0;
}
legend {
	color:#000
}

网站的公共样式css–common.css或者模块名.css
每个页面自己独有的css–与html文件名保持一致

运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块

注意

logo：使用h1>a结构，可以适当添加SEO搜索的关键字

     <h1 class="logo">
          <a href="index.html">拉勾招聘|招聘|求职|互联网|培训|JAVA|前端</a>
     </h1>

	.logo { 
	    width: 43px;
	    height: 31px; 
	}
     .logo a {
	    display: block;
	    width: 43px;
	    height: 21px;
	    background: url(../images/logo.png) no-repeat 0 0;
	    text-indent: -999em;
	    overflow: hidden;
	}

nav结构：常用ul>li>a列表结构搭建
盒子阴影属性

box-shadow:水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
box-shadow:3px 3px 5px 4px rgb(0,0,0);

多余文字显示成…省略号

.word_cut{
 width: 245px;
 white-space: nowrap;
 overflow:hidden;
 text-overflow: ellipsis;
}

返回顶部

返回顶部定位时一般以中间为准,最好不要直接设置距离右侧多少像素

.backtop{
 position: fixed;
 left: 50%;
 bottom: 88px;
 width: 28px;
 height: 46px;
 margin-left: 630px;
}

我和夏天来了

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
如何制作PC端静态网页

开发流程需求分析-》整体规划-》界面设计-》前端程序设计-》前后端系统整合-》测试验收开发前准备确定页面版心（常见的版心宽度值包括960px、980px、1000px、1200px等）版心一般水平居中显示（使用标准流中的margin:0 auto;居中）分析页面中的行模块，以及每个行模块中的列模块– 确定布局类型（一列固定宽度且居中、两列左窄右宽型、通栏平均分布型，更多情况下，一个网页中可能同时包括2种以上的布局类型）开发制作HTML页面，CSS文件等<head>内的
复制链接

扫一扫