网页制作---眉头（导航栏）及页尾（版权信息）处理

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<style>p,h1,h2,h3,h4,h5,h6,ul,li{border: medium;font-weight: inherit;font: 100% 微软雅黑;}body,button,input,select,ul,li{font: 14px/1.5 微软雅黑;outline: none;}a{text-decoration: none;color: #6D6D6D;}.main_box{width: 400px;margin: 0px auto;padding: 110px 0 60px 0 ;}.login_box{height: 370px;border: 1px solid #e2e2e2;border-radius: 4px;}.login_box h3{font-size: 14px;padding: 17.5px 30px;border-bottom: 1px solid #e2e2e2;margin: 0px 0px; }.login_box h3 span{font-weight: bold;}.ml{float: left;}.mr{float: right;}.form_all_box{padding: 0 30px;color: #e2e2e2;}.form_box{display: inline-block; height: 40px;width: 338px; color: #4a4a4a; border: 1px solid #e2e2e2;margin: 20px 0 0; padding:0; text-indent: 10px; line-height: 40px;border-radius: 4px;}.form_all_box button{padding: 0 20px;border: 1px solid #1f95e2;}.form_all_box.form_button{margin-top: 10px;padding:10px 30px 0px;}.btn_box{display: inline-block; height: 40px;width: 338px; text-indent: 10px; line-height: 40px;border-radius: 4px;width: 100%;  font-size: 16px; letter-spacing: 4px;font-color: white;color: #fff;background-color: #1f95e2;}.select_btn{font-size:  14px ;padding: 0px 30px;margin-top: 5px;}.ml span{font: 14px 微软雅黑;}.checkbox_style{background-color: #FFF;color: #e2e2e2;position: relative;float: left;}.top_lead_box{height: 60px;width: 100%;border-bottom: 1px solid #e2e2e2;margin: 0 auto;}.school_lead_logo{padding: 10px 80px;}.contain_box{padding: 5px 80px;}.contain_box ul li{float: left;flood-color: #e2e2e2;padding: 0px 25px ;text-align: center; }.contain_box ul li a:hover{color: #1f95e2;}.forget_pw a{color: #1f95e2;text-decoration: underline;}.clear{clear: both;width: 0; height: 0; overflow: hidden;}.footer_box{text-align: center;color: #4a4a4a; border-top : 1px solid #e2e2e2;padding: 50px 0 20px 0;}.footer ul{margin: 0 auto;padding: 0 0 0 400px;}.footer ul li{flood-color: #e2e2e2;font-size: 14px;font-weight: bold;text-align: center;}.footer ul li span{padding: 0 45px;float: left;}.align_center p{text-align: center;padding-top: 18px;}.align_center{margin: 0 auto;}
</style>
</head>
<body style="margin: 0;">
<!--头部导航-->
<div class="top_lead_box"><div class="school_lead_logo ml"><img src="\images\logo.jpg" alt="XXXXXXXX"a><!--对照片的描述--></div><div class="contain_box mr"><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></ul></div>
</div>
</div>
<!--登录框-->
<div class="main_box"><div class="login_box"><h3><span>用户注册</span></h3><div class="form_all_box"><input type="text" class="form_box" name="uers" placeholder="用户名/邮箱">         </div><div class="form_all_box"><input type="text" class="form_box" name="password" placeholder="密码"></div><div class="form_all_box"><input type="text" class="form_box" name="password" placeholder="确认密码"></div><div class="form_all_box form_button"><button type="submit" class="btn_box">注册</button></div><div class="select_btn"><p class="ml"><input type="checkbox" class="checkbox_style" name="select" value="10天内自动登录" checked="checked"><span>10天内自动登录</span></p></div></div>
</div>
<div class="clear"></div>
<div class="clear"></div>
<!--尾部--><div class="footer_box"><div class="footer"><ul><li><span>XXX@XXXXX.com</span></li><li><span>XXX-XXXXXXXX</span></li><li><span>XXXXXXXX</span></li></ul></div ><div class="align_center"><p>©版权所有©2018 XXXX. All rights reserved.XXXXXXXXXXXXXX号</p></div></div>
</body>
</html>

列表的用法。。。

眉头

利用float：left将列表数列浮动成横栏。

用样式-<a>的padding设置两格之间的距离。

用a{text-decoration: none;color: #6D6D6D;}设置a标签对应的内容的下划线和颜色。

用a:hover{color: #1f95e2;}设置内置颜色：即鼠标接触后改变的颜色。

页尾

用<span>块元素控制其样式。

网页制作---眉头（导航栏）及页尾（版权信息）处理相关推荐

HTML5期末大作业：美食网页制作——餐饮料里(12页) HTML+CSS+JavaScript 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:美食网页制作--餐饮料里(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有 ...
我的网站搭建: (第四天) 导航栏与页脚
经过观察可以发现,基本上每个网站都会有一个叫导航栏的东西,其目的就是为了方便用户找到自己查看的页面.导航栏可以自己制作,但我选择的方法是使用Bootstrap框架,还有给每个网页都添加一段导航栏代码会 ...
使用php制作导航栏,如何制作简单导航栏
如何制作简单导航栏导语:一个网页必不可少的元素之一,导航,虽然各种创新已经逐渐把导航栏的"栏"给去掉了,以非栏架的`形式制作出导航.所以,导航是一个网页友好的入口,要学习网页制作 ...
CSS——CSS滑动门及其应用（制作微信导航栏） ※
滑动门先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一 ...
Android studio实现底部导航,AndroidStudio制作底部导航栏以及用Fragment实现切换功能...
前言大家好,我是 Vic,今天给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢学习目标 AndroidStudio制作底部导航栏以及用Fra ...
利用3D效果制作立体导航栏
利用3D效果制作立体导航栏文章目录使用3D效果制作3D导航栏一.3D的旋转以及位移二.使用步骤 1.搭建html骨架 2.添加css样式前言利用3D效果制作导航栏: 制作一个好玩的3D导航 ...
微信小程序制作顶部导航栏
1问题描述使用微信小程序开发者工具制作顶部导航栏. 2算法描述首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载. 然后点开开发者工具,选择小程序,点击图片 ...
uni-app小程序onShow执行两次；微信小程序onShow重复执行原因；导航栏tabBar页的onLoad函数不执行；App.vue页的onShow执行原因；onShow莫名其妙执行
1.只有五种情况会触发导航栏tabBar页的onLoad函数,分别是: –1.1:首次进入到导航栏tabBar页面: –1.2:从微信分享进入的导航栏tabBar页面: –1.3:识别二维码跳转到小程 ...
Androidstudio的制作微信导航栏的微信素材库
Androidstudio的制作微信导航栏的微信素材库(全部都是矢量绘图),大家可以去下载本次是一个资源分享,当你第一次看相关的导航栏的制作时可能会去模仿制作一个微信导航栏,用现成的矢量 ...
HTML5期末大作业：医药用品购物网站设计——医药用品购物商城首页(1页) HTML+CSS+JavaScript HTML+CSS大作业_ 医药用品购物网页制作作业_医药用品购物页设计...
HTML5期末大作业:医药用品购物网站设计--医药用品购物商城首页(1页) HTML+CSS+JavaScript HTML+CSS大作业: 医药用品购物网页制作作业_医药用品购物页设计- 常见网页设 ...

网页制作---眉头（导航栏）及页尾（版权信息）处理

网页制作---眉头（导航栏）及页尾（版权信息）处理相关推荐

最新文章

热门文章