A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

张栩宁

初级黑马

  • 黑马币:15

  • 帖子:5

  • 精华:0

© 张栩宁 初级黑马   /  2018-9-14 22:23  /  1008 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

来这里半个多月了,从最基础的标签开始学习,首先了解每个标签的运用方法。
简单完成一个页面需要用HTML用标记语言来描述网页。
例如:做一个网页,首先要清除他的本身的外边距和内边距然后看结构和分布区,设置相对的版心,宽高文字图片大小,以及文字图摆放位置,大多数用的都是无序列表具.(ol.ul.dl)有序无序定位列表。Div包裹内容的盒子。
从首部头部开始做,设置一个div由设计图来设置它的高和宽,在用display:block转换为块级元素,然后看设计图上的图片和其他文字来摆放位置,比如logo图片看设计图上的宽和高来用一个小盒子div装起来先用background-color来设置一个背景颜色看摆放位置,然后把一个背景图摆放好位置,在用background:url 来载入图片就完成了。搜索框也一样。摆放位置需要用到float左右浮动和定位。定位划分为相对定位,绝对定位,固定定位和静态定位。
浮动,float:(left)左(right),只有两个左右浮动,添加浮动之后自动转换为行内块元素
清除浮动:clear.both 清除左右两侧浮动
相对定位原来在标准流中的位置来说,(relative
绝对定位:子绝父相,如果父元素有定位,会按照父元素来进行移动,不保留位置。(absolutr
固定定位:以页面为主,不随滚动条滚动。(fixed
静态定位,相当于不要定位的意思,不会去用它。
有的图片当中由圆角之类和阴影,比如boxder-radius 为半径50%,矩形只用高度的一半
Box-shadow有水平阴影 垂直阴影模糊距离 阴影尺寸 阴影颜色。
模式转换,display:block,行内元素转换为块级元素inline,块级元素转换为行内元素。
Inline-bloce ,转为行内块元素,用的最多的也就是最后一个,行内块元素。
后面的步骤比如一些链接,用li标签划分,摆放好位置,链接于链接之间的距离和居中对其让画面整洁点。布局完之后,每个部分有时候也会用到最开始学习的基本标签比如p,br,h1-h6,等等。还有css设置版面的布局和外观显示样式,也是最重要的。
Ccs中有style元素样式,字体大小,font-size和字体风格style。字体粗细weight 字体 family
链接元素,a link 未问过的链接,a visited,已访问过的链接,a hover 经过链接是的状态也是最常用的一个, a,active 点击时候的状态。文字类元素不能放在块级元素里,行内元素不能给高宽
添加背景图片,background-image,设置背景图片的盒子必须要宽和高。(url)图片路径。
鼠标样式,cursor:default 默认的 pointer小手,move移动 text文本, not-allowed禁止
文本框取消轮廓线,outline:none在设置搜索框样式的时候去修改和取消轮廓线,基本上每个网页都会用到这个。Vertical-align 垂直对齐, resizr:none 防止拖拽文本域。
去除图片低缝隙:给img设置veertical-align:middle/top 给图片添加display:bolck转换为块级元素,white-space:nowrap强之一行内显示文本,text-overflow:ellipsos文字溢出部分转为省略号, overflowhidden 溢出部分隐藏,word-breakbreak-word设置单词换行
Word-wrapbreak-word 设置文本换行,letter-spacing 1px 设置文字距离。

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马