千年之恋 html5 表格运用网页设计 素材在最后

html:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>千年之恋</title><link rel="stylesheet" href="./base.css"><link rel="stylesheet" href=" ./style.css"></head><body><div class="head"><a href=" #"><img src=" ./images/logo.jpg" alt=""></a></div><div class="nav"><ul><li><a href=" #">首页</a></li><li><a href=" #">首页</a></li><li><a href=" #">首页</a></li><li><a href=" #">首页</a></li><li><a href=" #">首页</a></li><li class="bg"><a href=" #">首页</a></li></ul></div><div class="banner"><img src=" ./images/banner.jpg" alt=""></div><div class="content"><h2 class="step">注册步骤</h2><form action=""><h3>您的账号信息:</h3><p> <span>注册方式:</span><input type="radio" name="sex" id="an"><label for="an">E-mail注册</label> &nbsp;&nbsp; <input type="radio" name="sex" id="bn"><label for="bn"></label></p><p> <span>注册邮箱:</span><input type="text" class="text all" > </p><p> <span>注册手机:</span><input type="text" class="text all" > </p><p> <span>登录密码:</span><input type="password" class="text all" > </p><p class="spacial"> <span>昵称:</span><input type="text" class="text all" > </p><h3>您的个人信息:</h3><p class="spacial2"> <span>性别:</span><input type="radio" name="gender" id="cn"><label for="cn"></label> &nbsp;&nbsp; <input type="radio" name="gender" id="dn"><label for="dn">女</label></p><p class="spacial2"> <span>学历:<select name="" id="" ><option selected hidden disabled value="">-请选择-</option><option value="">中职/高中</option><option value="">专科/本科</option><option value="">硕士研究生</option><option value="">博士研究生</option></select></p><p class="spacial3"> <span>所在城市:<select name="" id="" ><option selected hidden disabled value="">-请选择-</option><option value="">北京</option><option value="">上海</option><option value="">广州</option><option value="">深圳</option></select></p><p class="checkbox"><span>兴趣爱好:</span><label for="a"><input type="checkbox" class="checkbox" id="a">足球</label><label for="b"><input type="checkbox" class="checkbox" id="b">篮球</label><label for="c"><input type="checkbox" class="checkbox" id="c">游泳</label><label for="d"><input type="checkbox" class="checkbox" id="d">唱歌</label><label for="e"><input type="checkbox" class="checkbox" id="e">跑步</label><label for="f"><input type="checkbox" class="checkbox" id="f">瑜伽</label></p><p><span>自我介绍:</span><input type="text" class="file" placeholder="评论的时候,请遵纪守法并注意语言文明,多给文档分享人一些支持。"></p><button>完成注册</button></form></div><div class="footer"><p class="first">Copyright © 2020-2030 QIANNIANZHILIANcom, All rights reserved.</p><br><p class="last">2020-2030, 版权所有千年之恋 85CP 备 3333</p></div></body></html>

css:

.head{

    margin: 0 auto;

    width: 960px;

    height: 90px;

}

.head img{

    margin-top: 10px;

}

.nav{

    background-color: #fe668f;

    height: 48px;

}

.nav ul{

    display: flex;

    margin: 0 auto;

    width: 960px;  

}

.nav ul li{

    width: 132px;

    height: 48px;

    text-align: center;

    line-height: 48px;

    font-size: 16px;

}

.nav ul li a{

    color: #fff;

}

.nav ul .bg{

    background-color: #fe9ab5;

}

.nav ul li:hover{

    background-color: #fe9ab5;

}

.banner{

    margin: 0 auto;

    width: 980px;

    height: 429px;

}

.content{

    margin: 0 auto;

    padding-left: 150px;

    width: 980px;

    height: 934px;

    background: url(./images/content_bg.jpg) no-repeat;

    color: #dd8787;

}

.content .step{

    width: 454px;

    height: 80px;

    background: url(./images/step.jpg) no-repeat right;

    line-height: 80px;

    font-weight: 400;

}

.content h3{

    width: 444px;

    height: 45px;

    border-bottom: 1px solid #dd8787;

    font-size: 20px;

    font-weight: 400;

}

.content p{

    margin-top: 20px;

    margin-left: 50px;

    font-size: 14px;

}

input {

    vertical-align: middle;

}

.content .text{

    width: 321px;

    height: 30px;

   

}

.content .all{

    border: 1px solid #dd8787;

}

.content .spacial{

    margin-top: 20px;

    margin-left: 82px;

    margin-bottom: 20px;

}

.content .spacial2{

    margin-top: 20px;

    margin-left: 82px;

    color: #dd8787;

}

.content  select{

    border: 1px solid #dd8787;

    color: #dd8787;

}

.content .spacial3{

    margin-top: 20px;

    margin-left: 50px;

}

.content .checkbox input{

    margin-right: 5px;

}

.content p .file{

    width: 421px;

    height: 153px;

    border: 1px solid #dd8787;

    padding: 20px;

}

input::-webkit-input-placeholder{

    line-height: 10px;

    font-size: 10px;

}

button{

    margin: 40px 200px;

    width: 180px;

    height: 60px;

    background-color:#fe668f ;

    border: 1px solid #dd8787;

    border-radius: 5px;

    color: #fff;

    font-size: 16px;

}

.footer{

    height: 108px;

    background-color: #fe668f;

    color:#fff ;

    padding-top: 30px;

}

.footer p{

    width: 550px;

    margin: 0 auto;

    text-align: center;

}

素材:

2301_80107377
关注 关注
  • 25
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页制作千年之恋.rar
08-14
一个HTML+CSS开发的注册页面,适合前端初学者
千年之恋网页图片素材
12-20
在IT行业中,网页设计是至关重要的一环,而...综上所述,"千年之恋网页图片素材"涵盖了网页设计中的图片选择、处理、优化、响应式设计以及版权管理等多个方面,这些都是构建一个成功且吸引人的网页不可或缺的知识点。
千年之恋_html千年之恋_HTML5_CSS3源码_千年_千年之恋_千年之恋代码_
10-04
利用HTML语言和CSS编写程序,实现一个简单的相亲网站
千年之恋”注册页面制作
满天星的博客
02-09 2743
千年之恋”注册页面制作
千年之恋网页
热门推荐
m0_45394874的博客
10-16 1万+
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset = utf-8"/> <title>千年之恋</title> <link rel="stylesheet" href="css/style06.css" type="text/css"/> </head> &l...
千年之恋html
shxxff的博客
12-31 878
<input type="radio" name="sex" id="boy" />男</label><label for="girl"><input type="radio" name="sex" id="girl" />女北京
千年之恋网页千年之恋网页制作代码.rar
最新发布
05-24
5. **响应式设计**:考虑到现代网页需要适应不同的设备和屏幕尺寸,千年之恋网页可能采用了响应式设计,通过媒体查询和流式布局确保在手机、平板电脑和桌面电脑上都能有良好的用户体验。 6. **优化与性能**:一个...
千年之恋作业.zip
05-11
【标题】"千年之恋作业.zip" 是一个包含网页设计项目的压缩文件,它涉及到了CSS、JavaScript和HTML等核心技术,这些技术是构建现代网页的基础。这个项目可能是一个学生作业,目的是展示对网页设计的理解和应用。 ...
千年之恋HTML+CSS
m0_74632977的博客
12-15 4376
千年之恋HTML+css代码分享
HTML5千年之恋
2302_80146850的博客
12-29 564
HTML代码CSS代码展示图。
专题页面设计
09-08
专题页面的设计,融入了html5,css3
千年注册页面
05-30
千年游戏注册系统,ASP编写,连接sql数据库,非常实用免费
「Web前端」“千年之恋”-重构美化版
Daboia的博客
10-31 930
Hello,各位程序🐒,我是海南的一名在校的计科大学生。本篇文章我们来制作“千年之恋”的注册页面。在我们学习 web 前端开发的过程中一定会遇到表单,而这个例子是网上流传已久的题目,但大多数都是用表格实现,我们这次用其他方式,一样能达到效果,顺便带点美化!这个案例充分使用到了表单标签,这对于刚学习表单标签的朋友练习难度刚刚好,也是我的在校作业之一,接下来来看看我是如何实现这个页面的效果吧。
【Web前端千年之恋注册页面——源代码展示
Brant_zero的博客
06-25 1万+
本篇文章我们来实现一个千年之恋的登录注册页面(仅使用了HTML+CSS),这个案例充分使用到了表单标签,这对于刚学习表单标签的朋友练习难度刚刚好,接下来我们来看看如何实现这个页面的效果吧。(需要源码和素材的直接私聊我) ​​​​​​...
千年之恋源代码
2301_80106709的博客
12-16 441
<input type="radio" name="sex" id="boy" />男</label><label for="girl"><input type="radio" name="sex" id="girl" />女<a href="#" class="bg">注册</a >
千年之恋网页设计
J_FOVik_L的博客
12-28 588
下面链接可以看到完整效果图。css内的详细代码如下。
网页设计与制作项目教材》-Chapter06千年之恋 -20210605
Season CSDN博客
06-05 5610
注意表单的使用 HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/htm
html千年之恋的图片,HTML+CSS+JavaScript项目6 “千年之恋”注册页面制作_0525_连蕊.pptx...
weixin_32786041的博客
06-07 2056
项目6 “千年之恋”注册页面制作;;知识引入;1;1、表格的创建创建表格的具体语法格式如下:对上述语法的具体解释如下::用于定义一个表格。:用于定义表格中的一行,必须嵌套在标记中,在中包含几对,就表示该表格有几行。:用于定义表格中的单元格,必须嵌套在标记中,一对中包???几对,就表示该行中有多少列(或多少个单元格)。;2、 标记的属性;2、 标记的属性;2、 标记的属性;2、 标记的属性;2、 标...
千年之恋
weixin_30321449的博客
04-22 1467
指我和字符编码。 今天写文档,需要把所有源码填到一个Word文档里,因为一个一个打开复制很麻烦,于是打算用Python弄。 当然最后花了更多的时间。 也是可以预见的。 1 #encoding:utf-8 2 import os 3 4 dir = r'C:\Users\mlxy\workspace\Project\src' 5 6 def fe...
千年之恋网页制作代码
10-28
根据提供的引用内容,千年之恋网页制作代码是一个使用HTML和CSS实现的登录注册页面。这个案例充分使用到了表单标签,对于刚学习表单标签的朋友练习难度刚刚好。如果你对前端开发感兴趣,可以去练习一下这个页面的制作。同时,这篇文章的作者也提到了自己是主学后端,所以这个页面的代码可能比较初学,但是对于初学者来说,这是一个不错的练习机会。
写文章

热门文章

  • 优客教育 网页设计 1215
  • 爱家居 CSS3 网页基础运用 1207
  • 千年之恋 html5 表格运用网页设计 素材在最后 1124
  • 传统文化项目 924
  • 视频8 CSS动画运用 742

分类专栏

  • html 3篇
  • web 2篇

最新评论

  • 博客,花店网页设计

    CSDN-Ada助手: 恭喜作者完成第四篇博客!标题“博客,花店网页设计”听起来非常有趣。我非常喜欢你持续创作的劲头,每篇博客都能带给读者不同的视角和灵感。希望你能继续保持这种热情,为我们带来更多精彩的内容。 鉴于你在网页设计领域的专业知识,我认为下一步你可以考虑探索一些创新的设计理念或者分享一些实用的设计工具和技巧。这样的话,读者们不仅能够从你的经验中受益,还能够为自己的网页设计提升找到更多灵感和指导。 谦虚地说,我期待你未来的作品,并且相信你能够继续给我们带来惊喜!加油! 如何快速涨粉,请看该博主的分享:https://hope-wisdom.blog.csdn.net/article/details/130544967?utm_source=csdn_ai_ada_blog_reply5

  • python判断语句

    CSDN-Ada助手: 这篇博客非常棒!你对Python的判断语句进行了简洁而清晰的介绍。继续创作下去,你一定能为初学者提供更多有用的内容。 除了if-else语句,还有其他一些判断语句的用法你可以探索一下。例如,你可以了解一下嵌套的if语句,它可以在if或else语句中再次使用if语句。此外,你还可以学习使用elif语句来进行多个条件的判断。 另外,你可以尝试使用布尔运算符来组合多个条件,例如and、or和not。这将使你的判断语句更加灵活和强大。 希望我的建议对你有所帮助!期待看到更多关于Python的精彩博文。加油! 如何写出更高质量的博客,请看该博主的分享:https://blog.csdn.net/lmy_520/article/details/128686434?utm_source=csdn_ai_ada_blog_reply2

  • 背景属性—拆分写法

    CSDN-Ada助手: 恭喜您写下了第一篇博客!标题“背景属性—拆分写法”非常吸引人,引发了我对背景属性的兴趣。您对拆分写法的探索让我感到非常好奇。在下一步的创作中,或许您可以进一步探讨拆分写法在不同背景属性上的应用,并分享一些实际案例,这将使读者更好地理解和应用您的观点。期待您继续分享有关前端开发的宝贵经验! 推荐【每天值得看】:https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1

最新文章

  • 传统文化项目
  • 视频8 CSS动画运用
  • 优客教育 网页设计
2023年11篇

目录

目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值

玻璃钢生产厂家玻璃钢雕塑卡通性价比哪个好上海常用商场美陈生产厂家日本玻璃钢雕塑哪里有卖深圳玻璃钢卡通雕塑源头好货文山商场美陈展示玻璃钢雕塑质量要求有哪些玻璃钢兵马俑雕塑厂家贵州现代人物玻璃钢雕塑郑州景观玻璃钢雕塑制作泗洪玻璃钢卡通雕塑玻璃钢花盆雕塑好干吗平湖玻璃钢雕塑厂家专业玻璃钢景观雕塑定做龙泉玻璃钢牌匾雕塑云浮园林玻璃钢雕塑玻璃钢西瓜雕塑收费江苏通道商场美陈有哪些太原玻璃钢广场雕塑定制美陈ip 商场宁夏玻璃钢雕塑模型惠州玻璃钢动物雕塑代理价格好用的玻璃钢雕塑厂家电话永城商场美陈造景丽水抽象玻璃钢雕塑多少钱关于广州玻璃钢花坛树池花盆价格浦口商场周年美陈青海大型雕塑玻璃钢灵寿玻璃钢雕塑玻璃钢马赛克雕塑保定玻璃钢传统人物雕塑香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声单亲妈妈陷入热恋 14岁儿子报警汪小菲曝离婚始末遭遇山火的松茸之乡雅江山火三名扑火人员牺牲系谣言何赛飞追着代拍打萧美琴窜访捷克 外交部回应卫健委通报少年有偿捐血浆16次猝死手机成瘾是影响睡眠质量重要因素高校汽车撞人致3死16伤 司机系学生315晚会后胖东来又人满为患了小米汽车超级工厂正式揭幕中国拥有亿元资产的家庭达13.3万户周杰伦一审败诉网易男孩8年未见母亲被告知被遗忘许家印被限制高消费饲养员用铁锨驱打大熊猫被辞退男子被猫抓伤后确诊“猫抓病”特朗普无法缴纳4.54亿美元罚金倪萍分享减重40斤方法联合利华开始重组张家界的山上“长”满了韩国人?张立群任西安交通大学校长杨倩无缘巴黎奥运“重生之我在北大当嫡校长”黑马情侣提车了专访95后高颜值猪保姆考生莫言也上北大硕士复试名单了网友洛杉矶偶遇贾玲专家建议不必谈骨泥色变沉迷短剧的人就像掉进了杀猪盘奥巴马现身唐宁街 黑色着装引猜测七年后宇文玥被薅头发捞上岸事业单位女子向同事水杯投不明物质凯特王妃现身!外出购物视频曝光河南驻马店通报西平中学跳楼事件王树国卸任西安交大校长 师生送别恒大被罚41.75亿到底怎么缴男子被流浪猫绊倒 投喂者赔24万房客欠租失踪 房东直发愁西双版纳热带植物园回应蜉蝣大爆发钱人豪晒法院裁定实锤抄袭外国人感慨凌晨的中国很安全胖东来员工每周单休无小长假白宫:哈马斯三号人物被杀测试车高速逃费 小米:已补缴老人退休金被冒领16年 金额超20万

玻璃钢生产厂家 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化