在HTML5教学中学CSS语法,框住所有资讯
刚开始上HTML5教学的时候,你是否觉得网页看起来很单调呢?利用CSS语法能快速建立边框表格,让资讯一目了然呢!
CSS DIV 排版对前端工程师已经是基本的网页排板方式，透过简单的 DIV 排版可以很容易创造出各式各样的网页版型，本文主要讲解 CSS DIV 单栏式的网页排版设计，算是透过排版最入门的方式了，请在HTML5教学中多搭配练习。
1. 区块"<span>"与"<div>"的属性设定
|
属性名称 |
说明 |
设定范例 |
|
border-style |
设定边框的线条样式，可设定为实线、虚线、点点等。 |
border-style: dotted； border-style: dashed； border-style: double； border-style: solid； border-style: groove； border-style: ridge； border-style: inset； border-style: outset； |
|
border-width |
设定边框的线条粗细 small、large、pt、px、cm、% |
border-width:6px; |
|
border-color |
设定边框的颜色 也可以直接使用"bold"指定之 |
border-color:blue; |
|
border-top border-left border-bottom border-right |
针对边框的上方线条做单独调整 针对边框的左方线条做单独调整 针对边框的下方线条做单独调整 针对边框的右方线条做单独调整 |
border-top:2px dotted blue; (设定值依序为粗细、线条样式、颜色) |
2. 跟外框相关的CSS设定 (常用)
|
属性名称 |
说明 |
设定范例 |
|
width |
区块宽度 |
width: 600px； |
|
height |
区块高度 |
height: 400px； |
|
margin |
边界距离设定 共四个数值，分别为上、右、下、左 |
margin:30px 10px 10px 30px; |
|
border-radius |
边界方框导圆角的圆角程度，数值越大越圆 共四个数值，分别为上、右、下、左 |
border-radius:50px 0px 50px 0px； |
|
background-color |
区块背景颜色 |
background-color:red； |
|
background-image |
区块背景图片 |
background-image:url； |
|
background-repeat |
区块背景图片重复方式 分别有 no-repeat(不重复)、 repeat-x、repeat(重复)、 repeat-y |
background-repeat:no-repeat； |
|
background-position |
区块背景图片放置位置 分别有top,center,bottom等，也可能是百分比或数值 |
background-position:center left； |
其实除了文字之外，前端工程师在HTML5教学网页的各个元素进行 CSS 格式设定时，有一个 「盒子模型 (box model) 」 的概念：就是所有要被设定的元素，都会被视为一个盒子"<span>"或"<div>"。
以上这两种身为前端工程师不可不知的HTML5教学你学会了吗？
推荐阅读:
