千年之恋HTML5和CSS3
2024-05-25 15:52:05
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
前言
提示：以下是本篇文章正文内容，下面案例可供参考
例题
利用 input和导航栏制作页面
二、使用步骤
1.引入库
代码如下（示例）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>千年之恋</title>
<style>
*{margin:0; padding:0; list-style:none; outline:none; border:0; background:none;}
body{font-family:"微软雅黑"; font-size:14px; }
a:link,a:visited{text-decoration: none; color: #fff;font-size: 16px;}
#header{width: 980px;height: 70px;margin: 0 auto;padding-top: 20px;
}
#nav_bg{width: 100%;height: 48px;background:#fe668f;
}
.nav{width: 980px;margin: 0 auto;
}
.nav li{float: left;
}
a{display: inline-block;height: 48px;line-height: 48px;padding:0 50px;
}
.bg{background: #fe9ab5;}
a:hover{background: #fe9ab5;}#banner{width: 980px;height: 429px;margin: 0 auto;
}#content{width: 830px;height: auto;background: url(../images/content_bg.jpg) no-repeat;margin: 0 auto;padding-left:150px;
}
.step{width: 454px;height: 80px;font-size: 20px;font-weight: 100;color: #dd8787;line-height: 80px;background: url(../images/step.jpg) center right no-repeat;
}
h3{width: 454px;height: 45px;font-size: 20px;font-weight: 100;color: #dd8787;line-height: 45px;border-bottom: 1px solid #dd8787;
}
td{height: 50px;color: #dd8787;
}
.left{width: 120px;text-align: right;
}
.right{width: 320px;height: 28px;border: 1px solid #dd8787;
}
input{vertical-align: middle;}
select{width: 200px;border: 1px solid #dd8787;color: #dd8787;
}
textarea{width: 380px;border: 1px solid #dd8787;resize: none;font-size: 12px;color: #aaa;padding: 20px;
}
.but{width: 400px;height: 50px;background: url("../images/btn.jpg") right center no-repeat;padding: 0 0 100px;
}#footer{width:100%; height:68px;line-height:26px;background:#fe668f; color:#fff; text-align:center;padding-top:40px;
}</style>
</head>
<body>
<div id="header"><img src="data:images/logo.jpg" alt=""></div>
<div id="nav_bg"><ul class="nav"><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><a href="#" class="bg">注册</a></li></ul>
</div>
<div id="banner"><img src="data:images/banner.jpg" alt="">
</div>
<div id="content"><h2 class="step">注册步骤：</h2><form action="#" method="post" class="one"><h3>您的账号信息：</h3><table class="content"><tr><td class="left">注册方式：</td><td><label for="one"><input type="radio" name="sex" id="one">E-mail注册</label> <label for="two"><input type="radio" name="sex" id="two">手机号码注册</label> </td></tr><tr><td class="left">注册邮箱：</td><td><input type="text" class="right"></td></tr><tr><td class="left">注册手机：</td><td><input type="text" class="right"></td></tr><tr><td class="left">登录密码：</td><td><input type="text" class="right"></td></tr><tr><td class="left">昵称：</td><td><input type="text" class="right"></td></tr></table><h3>您的个人信息：</h3><table class="content"><tr><td class="left">性别：</td><td><label for="boy"><input type="radio" name="sex" id="one">男 </label><label for="girl"><input type="radio" name="sex" id="two">女 </label></td></tr><tr><td class="left">学历：</td><td><select><option>-请选择-</option><option>中职/高中</option><option>专科/本科</option><option>硕士研究生</option><option>博士研究生</option></select></td></tr><tr><td class="left">所在城市：</td><td><select><option>-请选择-</option><option selected="selected">北京</option><option>上海</option><option>广州</option><option>深圳</option></select></td></tr><tr><td class="left">兴趣爱好：</td><td><input type="checkbox" />足球 <input type="checkbox" />篮球 <input type="checkbox" />游泳 <input type="checkbox" />唱歌 <input type="checkbox" />跑步 <input type="checkbox" />瑜伽</td></tr><tr><td class="left">自我介绍：</td><td><textarea cols="60" rows="8">评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持。</textarea></td></tr><tr><td colspan="2"><input type="button" class="but"></td></tr></table> </form>
</div>
<div id="footer"><p>Copyright © 2006-2016 QIANNIANZHILIANcom, All rights reserved.<br />2001-2018，版权所有 千年之恋 85CP备13385453</p>
</div>
</body>
</html>
2.读入数据
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了HTML5和CSS3的使用，背景图片自己插入
background:url(图片地址)；
千年之恋HTML5和CSS3相关推荐
- 零基础学HTML5和CSS3前端开发第一课
课程目标: 使用HTML5进行网站布局 使用CSS3进行网站美化 开发精美的商业网站 第一章 HTML5基础 概念: 网页 :互联网的基础,网络页面,网页:文字.图片.声音.视频.VR虚幻等:网站:淘 ...
- 入门精通web前端：三大核心HTML5、CSS3 、JS必学
WEB前端三大基础核心内容[HTML5.CSS3 和 JavaScript] 对于前端的学习和提高,我的基本思路是这样的.首先,前端的三个最基本的东西 HTML5.CSS3 和 JavaScript( ...
- HTML5和CSS3 WEB技术开发
HTML5和CSS3 WEB技术开发 B站视频参考:https://www.bilibili.com/video/BV1H44y1k7ze/ 课程目标: 使用HTML5进行网站布局 使用CSS3进行网 ...
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- 使用modernizr.js检测浏览器对html5以及css3的支持情况
使用modernizr.js检测浏览器对html5和css3的支持情况 详情请看主页:modernizr主页 1. modernizr 是什么? modernize 是一个js库----一个用于检测当 ...
- 《HTML5与CSS3实战指南》——2.5 构建The HTML5 Herald
本节书摘来自异步社区<HTML5与CSS3实战指南>一书中的第2章,第2.5节,作者: [美]Estelle Weyl , Louis Lazaris , Alexis Goldstein ...
- modernizr 支持html5,使用modernizr.js检测浏览器对html5以及css3的支持情况
使用modernizr.js检测浏览器对html5和css3的支持情况 1.modernizr 是什么? modernize 是一个js库----一个用于检测当前浏览器对html5&css3 ...
- 《响应式Web设计：HTML5和CSS3实践指南》——2.9节基于位置伪类的交替行样式
本节书摘来自华章社区<响应式Web设计:HTML5和CSS3实践指南>一书中的第2章,第2.9节基于位置伪类的交替行样式,作者(美) Benjamin LaGrone,更多章节内容可以访问 ...
- 《HTML5与CSS3实例教程》
<HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...
最新文章
- 【怎样写代码】确保对象的唯一性 -- 单例模式（三）：单例模式
- android studio 抓log,Android studio保存logcat日志到本地的操作
- jq修改iframe html代码,使用jQuery替换iframe的所有内容（包括doctype和html标签）
- 介绍几个移动web app开发框架
- linux e514写入错误,Linux上使用vim编辑文件保存时报错：E514: write error (file system full?)...
- linux系统分析工具续-SystemTap和火焰图（Flame Graph）
- HTML+CSS实现弹跳球效果
- Win7系统删除微软拼音
- IMX290 291驱动
- python提供了两个对象身份比较操作符是_python 对象
- 计算机excel求体重指数,excel标准差-制程能力指数（CPK）的定义及计算公式
- 罗技鼠标 903 底部按键是干嘛的，板载模式
- 用正则表达式爬CBO年度票房
- 如何利用碎片化时间形成知识体系
- 2019到2022年上海车牌成交价+上牌流程
- js 深浅拷贝的整理
- 网易微专业 UI设计师
- html有序列表设置混合编码,一组你值得拥有的 Markdown 中混用 HTML 案例
- 【VMware Fusion】如何配置VMware Fusion中的Vmnet网卡
- 【c】三角形图形输入 6*11 看懂这一个以后打印图形信手nian来