Mr.J--简单页面制作

作为一个初学html+css的人，自己做一个小的页面是非常有必要的。以一个小的登录页面为例：

<!DOCTYPE html>
<html><link rel="stylesheet" href="css/FirstTest.css" /><head><meta charset="UTF-8"><title>FirstTest</title></head><body><h1> 506登录系统 </h1><div class="divcss5"></div><div class="divcss6"><div class="divcss4"><form action="" method="post"><tr><td><label for="txtname"style="font-weight:bold;">账号：</label></td><td><input type="text" id="txtname" name="login_username" placeholder="请输入您的用户名！"/></td></tr><br /><br /><tr><td><label for="txtpswd" style="font-weight:bold;">密码：</label></td><td><input type="password" id="txtpswd" name="login_pswd" placeholder="请输入您的用户密码！"/><a href="index.html"> 忘记密码</a></td></tr><tr><td colspan=2><br /> <br />&ensp;&ensp;<button type="submit" class="submit_button">登录</button>&ensp;&ensp;<a href="注册.html";>去注册</a></td></td></tr></table></form></div></div></div> </body>
</html>

上面是html部分，设置字体样式用CSS 虽然对于设置字体优先级：行内样式>内部样式>外部样式(后两者是就近原则)（CSS 三种引入方式）

 body{position: absolute;z-index: -1;background: url(../img/背景.jpg);}h1{/*设置字体颜色*/color: aqua;/* 设置字体阴影*/text-shadow:saddlebrown 5px 5px 10px;/* 设置在页面中的位置 */position:relative;left:1250px;top:180px;    /* 设置字体样式 */font-family:"Ink Free";font-size: 30px;}.divcss4{position:absolute;z-index: 2;right:0px;top:20px; }.divcss5{z-index:1; background:silver;opacity: 0.35;position: absolute;left:1160px;top:250px;width: 400px;height: 220px;} .divcss6{z-index: 5;position:absolute;left:1480px;top:230px;}a{font-size:12px;}button{width: 150px;height: 27px;color: cornflowerblue;font-size: 18px;}input{width: 250px;height:30px;}

里面的背景图由自己选择，页面效果：

Mr.J--简单页面制作相关推荐

Mr.J-- 简单生日页面制作
由于本次页面使用的图片涉及个人隐私,已经打码处理. 信息量不小,大家慢慢食用(滑稽.png) <!-- 制作人:Mr.J联系方式:2538808265(QQ)blog: https://blog ...
HTML简单页面制作，学会只需10分钟
QQ注册页面 <!DOCTYPE html> <html><head><meta charset="utf-8"><title ...
python制作简单网页_python 跑服务器，访问自己制作的简单页面
1 python 跑服务器,访问自己制作的简单页面 2 # win+b出现一个网址http:/0.0.1:5000/复制到浏览器查看 # http://127.0.0.1:5000/home 做这个首 ...
html简单登录页面制作
html简单登录页面制作 <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
HTML+CSS大作业——简单页面-名侦探柯南动漫(2页) 动漫网页设计制作简单静态HTML网页作品漫画作业成品学生影视网站模板
HTML5期末大作业:动漫网站设计--简单页面-名侦探柯南动漫(2页) 文章目录 HTML5期末大作业:动漫网站设计--简单页面-名侦探柯南动漫(2页) 一.作品展示二.文件目录三.代码实现四. ...
H5页面制作简单上手工具对比
以下-用了大概五天做一份H5+间接性听歌入魔,简单对比以下制作工具iH5和Epub360的使用心得: 1.界面美观来看,个人认为iH5逼格更高一点-派有些孩子气(??) 2.模板来说,iH5的模板更好 ...
HTML5期末大作业：动漫网站设计——简单页面-名侦探柯南动漫(2页) 动漫网页设计制作简单静态HTML网页作品漫画作业成品学生影视网站模板
HTML5期末大作业:动漫网站设计--简单页面-名侦探柯南动漫(2页) 动漫网页设计制作简单静态HTML网页作品漫画作业成品学生影视网站模板常见网页设计作业题材有个人. 美食. 公司. 学校 ...
第3期：12306页面制作
12306页面制作第1期: 手把手教你制作网易邮箱注册页面第2期: 网页动画制作(CSS+JS) 第3期:12306页面制作文章目录 12306页面制作前言一.基础知识 1.JS基础语法 2 ...
第三章 “我要点爆”微信小程序云开发之点爆方式页面和爆炸之音页面制作
点爆方式选择页面制作在app.json中配置页面路径增加selectbao点爆方式选择,编译创建页面文件,点爆方式选择页面通过单选按钮组选择跳转到相应的点爆页面. <view class=&q ...

Mr.J--简单页面制作

Mr.J--简单页面制作相关推荐

最新文章

热门文章