网页设计方框 第1篇
现场提问,用XMind现场总结,再次加深学生印象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ytPfFupZ-1667629806126)()]
完成昨天用户注册页面的样式设计
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SeSOma4r-1667629806127)()]
网页设计方框 第2篇
用axure现场画
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hXFfSgAW-1667629806121)()]
给区块设置边框
border: 1px solid black;
给控件设置圆角边框
border-radius:5px
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tab4ncH4-1667629806123)()]
表单控件、边距、样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-44aIiT9E-1667629806123)()]
表单控件、边距、样式
现场提问
网页设计方框 第3篇
用axure现场画
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j03CIZqs-1667629806124)()]
在HTML网页中根据编写CSS方式的不同可以将CSS分为三类:行内样式、内部(嵌)样式、外部样式
注意:行内样式只对当前标签生效
注意:内嵌样式在当前页面中有效
注意:外部样式可以用在同一个网站的多个网页中,只需要在各个页面中去引用外部样式即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-npXOPm9Q-1667629806124)()]
不同的规则,该如何选择和取舍呢?
1.外边距 -上下外边距重叠 -左右外边距相加 -margin : 上右下左 [或者margin-top:x;margin-left:y;…] 2.内边距 -块内部的内容是否顶着边框,看内边距. -padding : 上右下左 套路与margin相同 3.居中 -块居中(横向居中) : margin:0 auto -块内内容居中 : text-align:center
页面中的所有元素都可以看成一个盒子,占据着一定的页面空间。一个盒子的完整大小由:内容content+内边距padding+边框border+外边距margin组成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X2RBv3oX-1667629806125)()]
如果想让一个元素居中显示,只需设置:margin:0 atuo;即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AeLyOE7j-1667629806125)()]
外边距、内填充、浮动
知识点补充
清除浮动:
clear: both
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dZOlr9ZU-1667629806126)()]
外边距、内填充
1、两个区块之间设置20个像素的间隔,该如何实现?
2、如何让区块中的内容不定格?
3、如何让两个区块显示在同一行?
网页设计方框 第4篇
顶部border-top-color、右侧border-right-color、底部border-bottom-color、 左侧border-left-color
透明边框的使用:在有些情况下网页制作人员可能想创建一个不可见的边框。这就引人了边框颜色值transparent(在CSS2中引入)。这个值用于创建有宽度的不可见边框。假设你希望包含3个链接的一组链接有边框,默认地这些边框不可见,不过,鼠标停留在链接上时边框要凸起。为此可以让边框在链接处于非悬停状态下透明:
a:link, a:visited {border-style: solid; border-width: 5px; border-color: transparent;}a:hover {border-color: gray;}
利用transparent,使用边框就像是额外的内边距一样,此外还有一个好处,就是能在你需要的时候使其可见。这种透明边框相当于内边距,因为元素的背景会延伸到边框区(假设有可见的背景)。警告:在IE7之前,IE/Win没有提供对transparent的支持。在以前的版本中,IE会根据元素的color值来设置边框颜色。