用html和css做一个网页?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用html和css做一个网页?相关的知识,希望对你有一定的参考价值。
1,打开记事本,并在其中输入必要信息,完整代码如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title>
<body><header><img src="molihua.jpg"width="412" height="291"</header> <article> <header> <h2>茉莉花</h2> <p>作者:宋 · 刘克庄 </p> </header> <hr/> <p>曾与瑶姬约。恍相逢、翠裳摇曳,珠韝联络。风露青冥非人世,揽结玉龙骖鹤。
爱万朵、千条纤弱。
祷祝花神怜惜取,问开时、晴雨须斟酌。枝上雪,莫消却。
恼人匹似中狂药。
凭危栏、烛光交映,乐声遥作。身上春衫香薰透,看到参横月落。
算茉莉、犹低一著。坐有缑山王郎子,倚玉箫、度曲难为酢。君不饮,铸成错。</p><h3>清平乐</h3><p>冰轮万里。云卷天如洗。先向海山生大士。却诞卯金之子。冰盆荔子堪尝。胆瓶茉莉尤香。震旦人人炎热,补陀夜夜清凉。</p><dl><dt>《浣溪沙》</dt><dd>南国幽花比并香。直从初夏到秋凉</dd><dt>《鹧鸪天》</dt><dd>携靓侣,泛轻航。棹歌惊起野鸳鸯</dd><dt>《真珠帘》</dt><dd>茉莉芰荷香,拍满笙箫院。</dd>
</dl></article> <footer>2019.9.6</footer> </body></html>
启动浏览器运行后,大家会发现界面并不美观,文字看着也比较乱。
为了解决这个问题,可以在界面添加css规则,让界面更好看,更标准化,将下面的代码块添加到记事本中,位置在<head>和<head/>也就是头部之间:
<style type="text/css">body background:gray; h2 text-align:center; header text-align:center; article p text-indent:2em; footer font-size:12px; font-align:center; </style> 参考技术A 可以,做一个静态页面。
用DIV+CSS做网页里要设置body和*规定内容
body{}表示是对body标签的设置,就是<html><head></head><body></body></html> 里面的body。
*{}表示对页面所有元素的设置,一般我们会设置*{margin:0px;padding:0px}来表示所有元素的margin和padding为0;
这两个的设置一般是为了页面标签的初始化,因为不同的浏览器默认标签有一些不同的属性。比如chrome默认li有margin-left:30px;的属性,p标签也默认有属性。有些浏览器会给body默认属性。如果不进行设置的话在不同浏览器解析出来的样式就会出现不一样,导致页面错乱。
*{}的优先级是很低的,你在第一个外部引用css文件中添加进行初始化,后面设置的属性如果和*{}里面的不符,会覆盖掉*{}里面的样式。这样,所有浏览器解析出来的样式就基本一样了。当然,浏览器兼容还有其他许多事情要做,对所有样式进行初始化是最基本的。
以上是关于用html和css做一个网页?的主要内容,如果未能解决你的问题,请参考以下文章