一个简单的网页设计代码

建站知识 2022-03-24 09:45www.168986.cn长沙网站建设

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

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

教程

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部分

{ margin: 0; padding: 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; margin: -300px 0 0 -215px; border: 1px solid #fff; border-radius: 20px; overflow: hidden;}

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

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

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

.form-item button { width: 360px; height: 50px; border: 0; border-radius: 25px; font-size: 18px; color: #1f6f4a; outline: none; cursor: pointer; 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; margin: 20px auto 0; font-size: 14px; overflow: hidden;}

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

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

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

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

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

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

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

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

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

{ box-sizing: border-box; }

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

.logo { margin: 50px auto; }

.form-item { width: auto; }

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

}

效果如图所示

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

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

一个简单的网页设计代码

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

一个简单的网页设计代码

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设