一个简单的网页设计代码

网站建设 2023-01-28 20:48www.1681989.com免费网站

今天就用前两节的知识教大家一个简单的网页制作，可能有些陌生的知识，自行百度哦。

今天制作的就是关于茉莉花的，上面是图片下面是诗歌，先不给大家展示结果图片哦，嘿嘿嘿......（留一点神秘感），在文章的展示效果图。

教程

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/>也就是头部之间

保存和预览，是不是看着美观多了

是不是非常简单呢，大家可以尝试一下。几乎每个网站都会有登录页面，那你知道如何写HTML登录页面吗？这篇文章就和大家分享一个HTML简单登录界面的代码，有一定的参考价值，感兴趣的朋友可以看看。

实例制作一个HTML登录页面，包含邮箱，登录密码，立即注册，忘记密码等，代码如下

HTML部分

程序猿的生活打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）

126 赞同 · 6 评论文章

</div>

</div>

</div>

CSS部分

{ marg: 0; paddg: 0; }

html { height: 100%; }

body { height: 100%; background: #fff url(img/backgroud.png) 50% 50% no-repeat; background-size: cover;}

.dowebok { position: absolute; left: 50%; : 50%; width: 430px; height: 550px; marg: -300px 0 0 -215px; border: 1px solid #fff; border-radius: 20px; overflow: hidden;}

.logo { width: 104px; height: 104px; marg: 50px auto 80px; background: url(img/log.png) 0 0 no-repeat; }

.form-item { position: relative; width: 360px; marg: 0 auto; paddg-bottom: 30px;}

.form-item put { width: 288px; height: 48px; paddg-left: 70px; border: 1px solid #fff; border-radius: 25px; font-size: 18px; color: #fff; background-color: transparent; outle: none;}

.form-item button { width: 360px; height: 50px; border: 0; border-radius: 25px; font-size: 18px; color: #1f6f4a; outle: none; cursor: poter; background-color: #fff; }

#username { background: url(img/emil.png) 20px 14px no-repeat; }

#password { background: url(img/password.png) 23px 11px no-repeat; }

.tip { display: none; position: absolute; left: 20px; : 52px; font-size: 14px; color: #f50; }

.reg-bar { width: 360px; marg: 20px auto 0; font-size: 14px; overflow: hidden;}

.reg-bar a { color: #fff; text-decoration: none; }

.reg-bar a:hover { text-decoration: underle; }

.reg-bar .reg { float: left; }

.reg-bar .fet { float: right; }

.dowebok ::-webkit-put-placeholder { font-size: 18px; le-height: 1.4; color: #fff;}

.dowebok :-moz-placeholder { font-size: 18px; le-height: 1.4; color: #fff;}

.dowebok ::-moz-placeholder { font-size: 18px; le-height: 1.4; color: #fff;}

.dowebok :-ms-put-placeholder { font-size: 18px; le-height: 1.4; color: #fff;}

@media screen and (max-width: 500px) {

{ box-sizg: border-box; }

.dowebok { position: static; width: auto; height: auto; marg: 0 30px; border: 0; border-radius: 0; }

.logo { marg: 50px auto; }

.form-item { width: auto; }

.form-item put, .form-item button, .reg-bar { width: 100%; }

}

效果如图所示

以上分享了HTML简单登录页面的代码，项目中用的比较多，可以直接拿过去使用或修改自己喜欢的样式，也希望大家多动手尝试，看看自己能不能写出其他的效果

上一篇：个人介绍网页设计代码下一篇：郑州建设网站

一个简单的网页设计代码

seo网络推广搜索

推火网导航

seo

网络推广

网络营销

JS判断访客浏览器环境（pc端，移动端，还是微

一个简单的网页设计代码

网站设计

seo网络推广搜索

推火网导航

seo

网络推广

网络营销

JS判断访客浏览器环境（pc端，移动端，还是微