网页实战心得体会
- 熟话说：实践是检验真理的唯一标准，有些东西看起来简单，自己写起来就很懵逼，网页实战就是这么回事，看老师教学各种简单，都是我会的，但在实际操作过程中就会遇到各种各样的问题，而这些不规范的写法，就会导致网页bug的出现，当然这是后话，对于一个新手来说，写一张页面真的不容易，首先就是花费时间非常多，效率太低。从老师教学的拉勾网开始到自己动手做一遍，到做作业结束，脑子里都是乱乱的，没有对页面有个大局的把控，还是无法在特点的地方使用相对的样式， 从而导致页面出现混乱，出现各种疑难杂症。下面我就说下自己在制作网页过程中遇到的各种问题。
- 特别感谢拉勾教育的老师的各种疑难解答，无论是平时的问题解答，还是在难以坚持的时候的一个鸡汤，让我对前端学习的信心，不知不觉已经快一个月了，这一个月虽然学习的是自己学习过的东西，但是更多的是对知识的梳理，让我对前端的知识点有了更全面的补充，关于静态页面的开发我认为就是要细心，要有耐心。
一、项目如何规范化开发
- 首先我们拿到一个网页时，应该尽可能去分析页面的版心和结构内容，<head>内的配置有什么，<title>标签设置对SEO优化的影响等
- 如何引入icon图标优化网页标题
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
- 分级引入css样式表，把公共样式表和默认样式表先引入，用后引入的特定样式表覆盖先引入的样式表，达到分级效果，这里要注意公共样式表可以再其他页面多次使用，因此在制作网页过程中要注意分开，用多个样式覆盖需要引入的样式表
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/header.css">
<link rel="stylesheet" href="./css/index.css">
- 完美布局一个静态网页需要对页面精度的把控，需要UI设计师和前端工程师共同完成，需要计算宽度和高度比例，盒子模型大小，内边距和外边距的距离都会对网页样式产生影响，在什么时候使用什么样的标签。
- 引入初始化样式表
/* 初始化样式 */
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {
margin: 0;
padding: 0
}
body,button,input,select,textarea {
font: 14px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%
}
address,cite,dfn,em,var {
font-style: normal
}
code,kbd,pre,samp {
font-family: courier new, courier, monospace
}
small {
font-size: 12px
}
ol,ul li {
list-style: none
}
a {
text-decoration: none
}
sup {
vertical-align: text-top
}
sub {
vertical-align: text-bottom
}
legend {
color: #000
}
fieldset,img {
border: 0
}
button,input,select,textarea {
font-size: 100%
}
button {
border-radius: 0
}
table {
border-collapse: collapse;
border-spacing: 0
}
/* 公共样式 */
二、css补充
多余文字显示成...
.word_cut{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
阴影box-shadow
box-shadow: 指定为内阴影inset x-坐标 y-坐标 模糊程度 阴影扩展长度值 颜色
cursor定义鼠标指针样式
- 通过把cursor定义为pointer，即cursou:pointer，实现手指样式
- 通过把cursor定义为crosshair，即cursou:crosshair，实现交叉十字样式
- 通过把cursor定义为text，即cursou:text，实现文本选择样式
- 通过把cursor定义为default，即cursou:default，实现箭头样式，既默认样式
垂直居中
vertical-align: middle;
input点击取消边框
outline: none;
网友评论