JavaWeb-CSS的基础
JavaWeb-CSS
部分图片不能提取
具体的编写规则可以参考样式表中文手册（网上可以直接下载）
CSS:层叠式样式表，决定页面的美观程度
CSS语法
基础语法
代码实例
- html中的代码
CSS语法
这里是段落一
这里是段落二
这里是段落三
这里是段落四
hello
world
!!!
- CSS中的代码
/*ID样式,id尽量唯一*/
#bg{
background-color:yellow;
font-size:24px;
font-weight:bolder;
font-style:italic;
font-family:"隶书";
}
/*组合样式，div内部的p遵循*/
div p{
color:blue;
}
div .f32{
font-size:30px;
font-family:"宋体";
}
代码效果
CSS盒子模型
基础标签
代码实例
盒子模型
代码效果
CSS布局
基础标签
代码实例
html的版本不同效果可能不同
布局
代码效果
一个小页面
div_top
div_left
div_main
div_bottom
代码效果
CSS水果静态页面的实现
CSS中的代码
body{
margin:0 无填充
padding:0;
background-color:#808080; 背景色
}
#div_container{ 大框架
width:80%;
height:100%:
border-width:1px;
border-style:dotted;
border-color:blue;
float:left;
margin-left:10%;
background-color:honeydew;
border-radius:8px; 边缘变圆
}
div{
position:relative;
float:left;
}
#div_fruit_list{ 水果图的框架
width:100%;
border-style:double;
border-width:1px;
border-color:red;
}
#tbl_fruit{ 水果图的构造
width:60%;
border-collapse:collapse; 表格间无填充
text-align:center; 居中
line-height:30px; 行高
font-size:20px; 字体大小
margin-top:120px;
margin-bottom:120px;
margin-left:20%;
}
#tbi_fruit,#tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{ 水果各行、列的构造
border-width:2px;
border-style:solid;
border-color:gray;
}
.w20{ 占据的空间
width:20%;
}
.photo{ 修饰图片
width:24px;
height:24px;
}
html中的代码
静态水果页面
引用外部文件
静态水果页面
名称
单价
数量
小计
操作
苹果
5
20
100
西瓜
3
20
60
菠萝
4
25
100
榴莲
3
30
90
总计
999
