web第四天，CSS基础
2021-04-19 07:29
标签：删除 back 大写 端点 电机 log indent 入口 董事长 1，看编辑器会不会报错，一般有下划线提示。 2，看浏览器的调试台（F12），选择elements选项中需要调试的元素，然后通过style选项进行调试。在调试台中可以随意更改元素的属性值进行调试，但是不会对更改源代码。 1，background-attchment ： fixed 让背景进行固定。 2，background-size ： 值 ： width 和 height - > 背景图的宽和高， 可以为 100% 100% ，可以将背景图铺满容器。 值 ： 单词（cover）覆盖 可以将背景图片等比例地铺满整个容器，但是超出容器部分不会显示 （contain）包含 可以将图片等比例的调整到刚好不会超出容器的大小，但是不会完全铺满容器 font-size : 16px (默认大小) font-weight : font-style : normal(正常) italic（倾斜） color：设置字体颜色 text-decoration: overline(上划线) underline(下划线) line-through(删除线) 可以设置多个值。 text-transform: lowercase(单词小写) uppercase(单词大写) capitalize(首字母大写) text-indent: 32px; text-align : left right center justify(两端点对齐) web第四天，CSS基础 标签：删除 back 大写 端点 电机 log indent 入口 董事长 原文地址：https://www.cnblogs.com/lykpy/p/12270226.html一，怎么对写错的样式进行调试？
二，背景图片属性
三，CSS字体类型
四，CSS字体大小
注：建议字体大小都设置成偶数。(主要目的是考虑文字对齐)五，CSS字体粗细
值 100 200 ... 900
三个档：100 200 300 (细) 400 500 ( 正常 ) 600 700 800 900 (粗)
单词 ( normal 默认表示正常 , bold 加粗 )六，CSS字体样式
七，CSS文本修饰
八，CSS文本大小写（英文）
九，CSS文本缩进（中文）
十，CSS文本对齐方式
页面布局实例
1 DOCTYPE html>
2 html lang="en">
3 head>
4 meta charset="UTF-8">
5 meta name="viewport" content="width=device-width, initial-scale=1.0">
6 meta http-equiv="X-UA-Compatible" content="ie=edge">
7 title>Documenttitle>
8 head>
9 body>
10 div id="header">
11 a href="#" >trevlsothemea>
12 input type="text" placeholder="SEARCH">
13 div>
14 div id="banner">
15 a href="#">img src="#" alt="图片">a>
16 div>
17 div id="news" >
18 div
19
>a href="#">公司新闻a>h3>
20 ul>
21 li>
22 a href="#">董事长召开大会a>
23 li>
24 li>
25 a href="#">中国电器分会a>
26 li>
27 li>
28 a href="#">董事长访问中国住的大使馆a>
29 li>
30 li>
31 a href="#">企业文化与企业a>
32 li>
33 li>
34 a href="#">董事长的销售会议a>
35 li>
36 li>
37 a href="#">喜迎七一a>
38 li>
39 ul>
40 div>
41 div >
42 h3>a href="#">公司介绍a>h3>
43 p>公司成立于1984年br>经过几十年的发展p>
44 p>已成为电器制造，房地产开发和金融br>投资的大企业p>
45 div>
46 div>
47 h3>a href="#">人才招聘a>h3>
48 p>培养一流的人才，铸造一六的工程br>实现员工与企业的共同发展p>
49 a href="#">img src="" alt="图片">a>
50 div>
51 div>
52 div id="project">
53 h3>a href="">市场项目a>h3>
54 a href="#">img src="" alt="图片">a>
55 p>交通轨道p>
56 a href="#">img src="" alt="图片">a>
57 p>节能环保p>
58 a href="#">img src="" alt="图片">a>
59 p>航空航天p>
60 a href="#">img src="" alt="图片">a>
61 p>石油，天然气与采矿p>
62 div>
63 div id="product">
64
65 ul>
66 div>
67 h3>产品中心h3>hr>
68 ul>
69 li>a href="#">汽车电机a>li>
70 li>a href="#">日用电机a>li>
71 li>a href="#">特种电机a>li>
72 li>a href="#">大功率电机a>li>
73 li>a href="#">电工设备a>li>
74 ul>
75 ul>
76 li>a href="#">自动化a>li>
77 li>a href="#">系统基础a>li>
78 li>a href="#">搅拌机a>li>
79 li>a href="#">电动车辆a>li>
80 ul>
81 ul>
82 li>a href="#">电池电源a>li>
83 li>a href="#">输入设备a>li>
84 li>a href="#">楼盘信息a>li>
85 li>a href="#">金融产品a>li>
86 div>
87 div>
88 h3>技术研发h3>hr>
89 ul>
90 li>a href="">科技力量a>li>
91 li>a href="">a>先进设备li>
92 li>a href="">研发测试a>li>
93 li>a href="">工艺流程a>li>
94 ul>
95 div>
96 div>
97 h3>营销网络h3>hr>
98 a href="#">img src="" alt="图片">a>
99 div>
100 div>
101 div id="foot">
102 a href="">网站地图a>
103 a href="">联系我们a>
104 a href="">关注入口a>
105 a href="">采购系统入口a>
106 p>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字p>
107 a href="">分享到a>
108 div>
109 body>
110 html>
上一篇：html之内嵌页面
下一篇：AJAX---发送POST请求