capstone训练营2017-12-11
来源：互联网 发布：seo牛人 编辑：程序博客网 时间：2024/06/06 00:10
div容器的居中：margin:0px （距边距离）px;
练习网页html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link type="text/css" rel="stylesheet" href="beijingdaxue.css"></head><body><div class="page" id="page"> <div class="header" id="header"> <div class="firstheader" id="firstheader" style="background-color: #700005"> <ul class="leftul"> <li class="ulli"><a href="">学生</a></li> <li class="ulli"><a href="">教职工</a></li> <li class="ulli"><a href="">校友</a></li> <li class="ulli"><a href="">家长</a></li> <li class="ulli"><a href="">访客</a></li> <li class="ulli"><a href="">招聘</a></li> <li class="ulli"><a href="">捐赠</a></li> </ul> <ul class="rightul"> <li class="ulli"><a href="">门户</a> </li> <li class="ulli"><a href="">网络</a> </li> <li class="ulli"><a href="">邮箱</a> </li> <li class="ulli"><a href="">BBS</a> </li> <li class="ulli"><a href="">图书馆</a> </li> <li class="ulli"><a href="">医学部</a> </li> <li class="ulli"><a href="">领导信箱</a> </li> <li class="ulli"><a href="">120周年校庆</a> </li> <li class="ulli"><a href="">English</a> </li> <li class="ulli"><img src="src/img"></li> </ul> </div> <div class="logo" id="logo"><img height="100%" width="100%" src="src/img/VQWHTH%7D40FXBX%7BGM_8UP_(J.png"></div> <div class="list" id="list"><ul> <li class="logoul"><a href="">北大概况</a> </li> <li class="logoul"><a href="">招生与资助</a> </li> <li class="logoul"><a href="">学院与联系</a> </li> <li class="logoul"><a href="">教育教学</a> </li> <li class="logoul"><a href="">科学研究</a> </li> <li class="logoul"><a href="">合作交流</a> </li> <li class="logoul"><a href="">校园生活</a> </li> </ul></div> <div class="photo" id="photo"> <div class="img" id="first" style="z-index: 1"><img src="src/img/1-1.png"/></div><!-- 设置五张图片 --> <div class="img" id="second" style="z-index: 2"><img src="src/img/1-2.png"/></div> <div class="img" id="third" style="z-index: 3"><img src="src/img/1-3.png"/></div> <div class="img" id="fourth" style="z-index: 4"><img src="src/img/1-4.png"/></div> <div class="img" id="fifth" style="z-index: 5"><img src="src/img/20170830140741_777.jpg" height="264" width="640"/></div> </div> <div id="login"> <div id="logintitle"> 登录信息 </div> <div id="name"> <input type="text" placeholder="请输入用户名"> </div> <div id="password"> <input type="password" placeholder="请输入密码"> </div> <div id="submit"> <input type="submit" id="submitbutton" value="登录"> </div> </div> </div> <div class="between" id="between"> <div class="main" id="main"><h5>北大要闻</h5><hr class="line"/> <ul class="mainul"> <li><img src="src/img/]XHL_WRCIDS3Z)WVR1H_8}0.png" height="83" width="148"/></li> <li><a href=""><p>asdasdasdasdasdasdasdasdsa<br>dsadasdasdas</p></a></li> </ul> <ul class="mainul"> <li><a href=""><p>asdasdasdasdasdasdasdasdsa<br>dsadasdasdsad</p></a></li> <li><hr/></li> <li><a href=""><p>asdasdasdasdasdasdasdasds<br>adsadasdadsaasd</p></a></li> <li><hr/></li> <li><a href=""><p>asdasdasdasdasdasdasdasdsa<br>dsadasdadsadasda</p></a></li> </ul> <ul class="mainul"> <li><a href=""><p>asdasdasdasdasdasdasdasdsad<br>sadasdadsda</p></a></li> <li><hr/></li> <li><a href=""><p>asdasdasdasdasdasdasdasds<br>adsadasdadsd</p></a></li> <li><hr/></li> <li><a href=""><p>asdasdasdasdasdasdasdasds<br>adsadasddasdas</p></a></li> </ul> </div> </div> <div class="footer" id="footer"> <div class="firstfoot" id="firstfoot"> <div class="foootermain"> <ul class="footul"> <li class="footlist"><a href="">北大概况</a> </li> <li class="footlist"><a href="">院系设置</a> </li> <li class="footlist"><a href="">科学研究</a> </li> <li class="footlist"><a href="">校园生活</a> </li> </ul> <ul class="footul"> <li class="footlist"><a href="">招生资助</a> </li> <li class="footlist"><a href="">教育教学</a> </li> <li class="footlist"><a href="">合作交流</a> </li> <li class="footlist"><a href="">观光访问</a> </li> </ul> </div> <div class="footp"><img src="src/img/1A~~`~%JYSL}2K2)){DB41U.png" height="128" width="36"/></div> <div class="footp"><img src="src/img/]XHL_WRCIDS3Z)WVR1H_8}0.png" height="83" width="148"/></div> <div class="footp"><img src="src/img/1A~~`~%JYSL}2K2)){DB41U.png" height="128" width="36"/></div> <div class="footp"><img src="src/img/TEGEX%U_SUWKM6Z~CI_]~EF.png" height="121" width="193"/></div> </div> <div class="foot" id="foot"><p><a href="">版权所有©北京大学</a> | <a href="">地址：北京海淀区颐和园路5号</a> | <a href="">邮编：100871</a> | <a href="">邮箱：12313131@123.com</a> | <a href="">京IP123123131</a> | <a href="">京公网安备1231231</a> </p></div> </div></div></body><script type="text/javascript"> function imgAutoChange() { //创建方法imgAutoChange var imgClass = document.getElementsByClassName("img"); //获取div元素 var imgClassLength = imgClass.length; //遍历div数量 for (var i = 0; i < imgClassLength; i++) { //循环 var zIndex = parseInt(imgClass[i].style.zIndex,10); //parseInt(字符串，进制数) zIndex=zIndex+1; if (zIndex > imgClassLength) { //判断 zIndex = 1; } imgClass[i].style.zIndex= zIndex; //把新的值返回给div的属性 } } window.setInterval(imgAutoChange,3000); //设置指定时间段调用方法 window.setInterval(方法名，时间单位毫秒)</script></html>网页的css.page{ width: 90%; padding-left: 5%;}a:link,a:visited{ text-decoration:none;}a:hover{ text-decoration:underline;}ul{ list-style: none;}.firstheader{ width: 100%; height: 30px; background:#700005 ; margin: 0; padding: 0;}.firstheader>ul{ margin: 1px;}.ulli>a{ color: white;}.ulli{ float: left; margin-top: 0px; padding: 0px 3px;}.leftul{ float: left;}.rightul{ float: right;}.logo{ margin: 0; float: right; clear: both; height: 100%; width: 100%;}.logoul{ float: left; padding: 5px 30px;}.list{ padding:0px 70px; text-align: center; clear: both;}.logoul>a{ color: black;}.photo{ height: 170px; width: 100%; clear: both;}.between{ float: left; clear: both;}.main{ padding: 0px 150px;}.mainul{ width: 27%; float: left; padding-top:10px ; padding-bottom: 20px;}.mainul>li>a{ color: black;}.mainul>li{ padding-top: 20px;}h5{ padding: 2px 0px;}.firstfoot{ padding: 20px 100px; background-color: #550A0A; height: 150px; margin: 0; padding: 0;}.footul{ padding: 20px; float: left;}.footul>li>a{ color: white;}.footer{ margin: 0; width: 100%; float: left; clear: both;}.foot{ padding: 2px 0px; width: 100%; height: 30px; background-color: black;}.foot>p>a{ color: white;}.foot>p{ padding: 0px 40px; color: white;}.footp{ padding-top: 20px; float: left;}.img{ /* 设置div定位 */ position: absolute; height: 300px; width: 70%;}.img>img { /* 设置图片填充div */ width: 100%; height: 100%;}#login{ float: right; border-radius: 30px; width: 200px; border: 1px solid black; padding: 10px 20px;}#logintitle,#name,#password,#submit{ text-align: center; font-size: 15px; color: cyan; padding: 5px 0 5px 0;}#submitbutton{ background-color: cyan; border: 0px; border-radius: 20px; padding: 0px 50px;}*{ margin: 0;}阅读全文
0 0
- capstone训练营2017-12-11
- Capstone训练营12
- Capstone训练营11
- capstone训练营2017-12-12
- Capstone训练营2017-12-6
- capstone训练营2017-12-7
- capstone训练营2017-12-13
- capstone训练营2017-12-14
- capstone训练营2017-12-15
- capstone训练营2017-12-18
- capstone训练营2017-12-19
- capstone训练营2017-12-20
- capstone训练营2017-12-21
- capstone训练营2017-12-25
- Capstone训练营1
- Capstone训练营2
- Capstone训练营3
- Capstone训练营4
- 公专星沙考场科目三考试考前相关注意事项
- 华为研发工程师编程题3
- 用选择法对10个数由小到大排序
- 认证鉴权与API权限控制在微服务架构中的设计与实现（一）
- 微信jssdk基本使用
- capstone训练营2017-12-11
- 360木马查杀后mysql数据不能启动
- MIT6.00 1x 第一讲-计算机科学简介-笔记
- 算法导论 第十章 基本数据结构 练习10.1-2
- codeforces 896C
- leetcode题解-19. Remove Nth Node From End of List
- WinPE VirtIO云主机版 支持west263 阿里云aliyun 送精简win2k3镜像
- eclipse版本和jdk对应关系
- CC NOV14 Chef and Churu 分块+BIT维护单点.
