HTML练习一
效果图
动态图
html代码
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>主页</title>
<link rel="stylesheet" type="text/css" href="static/content/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="static/content/index.css" />
</head> <body>
<!--背景-->
<div class="bg">
<img src="static/image/bg-timg2.jpg" width="100%" height="100%" />
</div>
<!--头部-->
<div class="container logo-search">
<div class="row">
<div class="logo">
<h1 style="margin-top: 10px;">HTML练习</h1>
</div>
<div class="search">
<input type="text" class="placeholder" id="s" name="s" placeholder="搜索……" autocomplete="off">
</div>
</div>
</div>
<!--导航栏-->
<div class="container navigation">
<div class="row">
<ul>
<li>
<a>首页</a>
</li>
<li>
<a>菜单1</a>
</li>
<li>
<a>菜单2</a>
</li>
<li>
<a>菜单3</a>
</li>
<li>
<a>菜单4</a>
</li>
<li>
<a>菜单5</a>
</li>
<li>
<a>菜单6</a>
</li>
<li>
<a>菜单7</a>
</li>
</ul>
</div>
</div>
<!--内容-->
<div class="container main">
<div class="row">
<!--左边-->
<div class="all-column left-column">
<div class="tab">
CSS教程
</div>
<div class="sidebar-box">
<a class="top_tit" target="_top" title="CSS Text(文本)" style="font-weight: bold; color: rgb(255,255,255); background-color: rgb(150,185,125);" href="javascript:void(0)">CSS Text(文本)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS Fonts(字体)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 链接(link)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 列表样式(ur)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 表格(table)</a> <a class="top_tit" target="_top" title="CSS Text(文本)" style="font-weight: bold; color: rgb(255,255,255); background-color: rgb(150,185,125);" href="javascript:void(0)">CSS Text(文本二)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS Fonts(字体二)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 链接(link二)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 列表样式(ur二)</a>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">CSS 表格(table二)</a>
</div>
</div>
<!--中间-->
<div class="all-column main-column">
<!--轮播图片-->
<div class="tempWrap">
<ul>
<li>
<a href="">
<img src="static/image/banner1.jpg" />
</a>
</li>
<li>
<a href="">
<img src="static/image/banner2.jpg" />
</a>
</li>
<li>
<a href="">
<img src="static/image/banner3.jpg" />
</a>
</li>
</ul>
<ol class="tempWrap-ol">
<li style="background-color: #222222;">1</li>
<li>2</li>
<li>3</li>
</ol>
</div> <!--内容-->
<div class="main-content">
内容
</div>
</div>
<!--右边-->
<div class="all-column right-column">
<div class="tab right-box right-tab">
分类导航
</div>
<div class="sidebar-box right-box">
<ul>
<li>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">服务端</a>
<ul class="right-tree">
<li>
<a>首页</a>
</li>
<li>
<a>菜单1</a>
</li>
<li>
<a>菜单2</a>
</li>
<li>
<a>菜单3</a>
</li>
<li>
<a>菜单4</a>
</li>
<li>
<a>菜单5</a>
</li>
<li>
<a>菜单6</a>
</li>
<li>
<a>菜单7</a>
</li>
<li>
<a>菜单87</a>
</li>
</ul>
</li>
<li>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">客户端</a>
<ul class="right-tree">
<li>
<a>首页</a>
</li>
</ul>
</li>
<li>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">数据库</a>
<ul class="right-tree">
<li>
<a>首页</a>
</li>
</ul>
</li>
<li>
<a target="top_tit" title="CSS Fonts(字体)" href="javascript:void(0)">测试</a>
<ul class="right-tree">
<li>
<a>首页</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--底部-->
<div class="footer">
<div class="row footer-data">
Copyright © 2013-2019
<strong>
<a href="//www.runoob.com/" target="_blank">菜鸟教程</a>
</strong>
<strong>
<a href="//www.runoob.com/" target="_blank">runoob.com</a>
</strong> All Rights Reserved. 备案号：闽ICP备15012807号-1
</div>
</div>
<!--返回顶部标签-->
<div class="fixed-btn">
<a class="go-top" href="javascript:void(0)" title="返回顶部" style="display: inline-block;"><i class="glyphicon glyphicon-chevron-up"></i></a>
<a class="qrcode" href="javascript:void(0)" title="关注我们"><i class="glyphicon glyphicon-qrcode"></i></a>
<a class="writer" style="" href="javascript:void(0)" title="标记/收藏"><i class="glyphicon glyphicon-star-empty" aria-hidden="true"></i></a>
<!-- qrcode modal -->
<div id="bottom-qrcode" class="modal-fade" style="display: none;">
<h4>微信关注</h4>
<div class="panel-body"><img alt="微信关注" src="static/image/1.png"></div>
</div>
</div> <script src="static/scripts/jQuery-2.2.0.min.js"></script>
<script src="static/scripts/bootstrap.min.js"></script>
<script src="static/scripts/index.js"></script>
</body> </html>
css代码：
.::after,.::before{
content: "";
display: table;
}
.::after,.::before{
clear: both;
}
body,ul,li{
margin:;
padding:;
color: #000000;
list-style: none;
}
div,li{
display: block;
}
.bg {
width: 100%;
min-width: 1000px;
height: 100%;
min-height: 1000px;
position: fixed;
z-index: -1;
}
.container {
margin: 0 auto;
padding: 0 10px;
}
/*头部*/
.logo-search{
width: 100%;
height: 80px;
padding: 10px 0 10px 20px;
overflow: hidden;
/*border: solid 1px yellow;*/
}
.logo{
width: 60%;
margin-right: 1%;
float: left;
}
.search{
width: 30%;
float: left;
}
.placeholder{
line-height: 34px;
left: 9px;
margin-top: 10px;
text-align: initial;
white-space: nowrap;
right: 9px;
height: 35px;
width: 94%;
padding: 0 3% 0 3%;
background-color: #fff;
border: 1px solid #c8c8c8;
border-radius: 3px;
color: #ccc;
font-weight:;
font-size: 1.2em;
}
/*导航栏*/
.navigation {
width: 100%;
height: 40px;
background-color: yellowgreen;
font-size: 1.1em;
font-family: proxima-nova,'Helvetica Neue',Helvetica,Arial,sans-serif;
overflow: hidden;
}
.row{
max-width: 1260px;
min-width: 755px;
margin: 0 auto;
padding:0 10px;
}
.navigation .row ul{
height: 40px;
padding: 10px 0 10px 10px;
list-style: nnone;
white-space: nowrap;
}
.navigation .row ul li{
float: left;
margin: 0 20px 0 0;
display: inline;
line-height: 20px;
text-align: center;
white-space: nowrap;
}
.navigation .row ul li a{
color: #FFFFFF;
padding: 10px 0 10px 0;
margin: 10px 0 0 0;
text-decoration: none;
}
.navigation .row ul li a:hover{
color: #CFCFCF;
}
/*内容*/
.main {
margin-top: 20px;
width: 100%;
}
.all-column{
margin-right: 1%;
float: left;
}
.left-column{
width: 14%;
/*height: 1000px;*/
/*border: solid 1px red;*/
}
.tab{
opacity: .7;
padding-left: 4px;
font-size: 1.2em;
line-height: 1.9em;
font-family: proxima-nova,'Helvetica Neue',Helvetica,Arial,sans-serif;
color: grey;
text-shadow: 0 1px 0 rgba(255,255,255,.15);
border: solid 1px rgba(0,0,0,.1);
border-bottom:;
background-clip: padding-box;
background-color: #f2f2f2;
}
.sidebar-box{
background: #fff;
margin: 5px 0 20px 0;
}
.sidebar-box a{
line-height: 20px;
text-decoration: none;
color: #000000;
background-color: #f6f4f0;
padding: 4px;
border-bottom: 1px solid #efefef;
display: block;
}
.sidebar-box a:hover{
font-weight: bold;
color: #2AABD2;
background-color: #CFCFCF;
}
.main-column{
width: 68%;
/*height: 1500px;*/
/*border: solid 1px #007BFF;*/
}
.tempWrap{
width: 100%;
height: 400px;
/*border: solid 1px #007BFF;*/
position: relative;
overflow: hidden;
}
.tempWrap ul li a img{
width: 100%;
height: 100%;
}
.tempWrap ul{
width: 300%;
position: relative;
overflow: hidden;
padding: 0px;
margin: 0px;
left: 0%;
}
.tempWrap ul li{
width: 33.33%;
height: 400px;
float: left;
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
}
.tempWrap-ol {
position: absolute;
z-index:;
left:;
right:;
bottom: 10px;
padding: 0 10px;
text-align: center;
display: inline-block;
}
.tempWrap-ol li{
width: 10px;
height: 10px;
font-size:;
line-height:;
border-radius: 50%;
display: inline-block;
text-align: center;
margin-right: 10px;
background-color: #c2c2c2;
cursor: pointer;
}
.main-content {
width: 100%;
height: 1000px;
border: solid 1px #007BFF;
font-size: 50px;
line-height: 500px;
text-align: center;
}
.right-column{
width: 14%;
/*height: 1000px;
border: solid 1px #101010;*/
}
.right-tab{
font-size: 30px;
font-weight: bold;
line-height: 50px;
}
.right-box{
margin:;
padding:;
text-align: center;
}
.right-box > ul > li{
margin: 5px 0 0 0;
position: relative;
vertical-align: middle;
cursor: pointer;
}
.right-box ul li a{
line-height: 30px;
}
.right-box > ul > li:hover > a{
font-weight: bold;
text-decoration: underline;
color: #3E8F3E;
background-color: #CFCFCF;
}
.right-box ul li:hover > ul{
display: block;
}
.right-tree {
position: absolute;
width: 300px;
/*height: 200px;*/
background: #f6f4f0;
right: 100%;
top:;
display: none;
float: left;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.right-tree li{
width: 140px;
margin: 5px;
float: left;
display: inline;
line-height: 20px;
text-align: center;
white-space: nowrap;
}
.right-tree li a{
color: #000000;
text-decoration: none;
}
.right-tree li a:hover{
color: #007BFF;
text-decoration: underline;
}
/*底部*/
.footer{
width: 100%;
height: 60px;
margin-top: 20px;
/*background-color: #fff;*/
}
.footer-data{
line-height: 60px;
text-align: center;
color: #000000;
font-size: 14px;
}
/*返回顶部标签*/
.fixed-btn{
position: fixed;
right: 1%;
bottom: 5%;
width: 40px;
border: 1px solid #eee;
background-color: white;
font-size: 24px;
z-index:;
}
.fixed-btn .go-top {
border-bottom: 1px solid #eee;
}
.fixed-btn a {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
color: #64854c;
text-decoration: none;
}
.fixed-btn a:hover {
background-color: #CFCFCF;
}
.fixed-btn a:after {
content: ".";
font-size:;
height: 100%;
display: inline-block;
vertical-align: middle;
}
.fixed-btn a i {
vertical-align: middle;
}
.fa {
display: inline-block;
font-family: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
}
.fixed-btn .modal-fade {
top: auto;
bottom:;
height: 188px;
width: 128px;
padding: 10px;
margin:;
right: 65px;
left: auto;
text-align: center;
position: absolute;
}
.fixed-btn .modal-fade:after,
.fixed-btn .modal-fade:before{
position: absolute;
top: 109px;
right: -100px;
content: '';
display: inline-block;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid white;
}
.panel-modal .panel-body {
overflow-y: auto;
}
.panel-body .panel-body img{
width: 128px;
height: 128px;
}
js代码：
$(function() {
//返回顶部标签
$(window).scroll(function() {
if($(window).scrollTop() > 100) {
$(".go-top").fadeIn(150);
} else {
$(".go-top").fadeOut(150);
}
});
$(".go-top").click(function() {
if($('html').scrollTop()) {
$('html').animate({
scrollTop: 0
}, 100);
return false;
}
$('body').animate({
scrollTop: 0
}, 100);
return false;
});
//微信二维码显示
$('.qrcode').hover(function() {
$('#bottom-qrcode').css({"display": "block"})
},function() {
$('#bottom-qrcode').css({"display": "none"})
}
);
//右侧菜单显示
// $('.right-box ul li a').hover(function() {
// $(".right-box ul li a + ul").addClass("blue");
// $('.blue').css({"display": "block"})
// },function() {
// $('.blue').css({"display": "none"})
// $(".right-box ul li a + ul").removeClass("blue");
// }
// );
//轮播图片
var index = 0;
function selectImage(liindex){
index = liindex;
var perleft = -index * 100;
$(".tempWrap ul").animate({"left": perleft + "%"});
// $('.tempWrap ul').css({"left": perleft + "%"});
$('.tempWrap-ol li').css({"background-color": "#c2c2c2"});
$('.tempWrap-ol li').eq(liindex).css({"background-color": "#222222"});
};
$('.tempWrap-ol li').click(function(e){
var i = parseInt(e.target.textContent);
selectImage(i-1);
});
function startImage(){
if(index == 2){
index = 0;
}else{
index++;
}
selectImage(index);
setTimeout(function(){ startImage(); } , 3000);
};
$('.tempWrap').onLoad(startImage());
})
图片的话自己找吧
随机推荐
- zookeeper系列 （第三章 ：zookeeper 的使用）
接上一章,在启动客户端之后,开始通过命令操作zookeeper 服务. 一:zookeeper 的基础命令 1.通过zkCli.sh 命令与主机建立一个会话 2.开始在会话中执行命令:写入Znode. ...
- Mac下持续集成-Jenkins权限设置
部署上后集成Jmeter玩了一晚上,后来发现账号登录不进去了,
- MySQL标准化、自动化部署
机器标准化:服务器的硬件配置(CPU.硬盘.内存.RAID)要保持一致 目录标准化: mysql的安装目录,存放数据的目录.日志文件等,多台机器上配置要统一 参数标准化: 多台服务器上,存放的my.c ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_12-webpack研究-webpack安装
npm默认安装配置的路径配置在nodejs的node_modules目录 j加上 -g 就是全局安装 后面只写webpack默认安装的是最新版本 指定版本号 视频中建议指定版本号进行安装
- MyISAM与InnoDB之间的区别
区别: 1. InnoDB支持事务,MyISAM不支持,对于InnoDB每一条SQL语言都默认封装成事务,自动提交,这样会影响速度,所以最好把多条SQL语言放在begin和commit之间,组成一个事 ...
- JAVA 基础编程练习题39 【程序 39 分数累加】
39 [程序 39 分数累加] 题目:编写一个函数,输入 n 为偶数时,调用函数求 1/2+1/4+...+1/n,当输入 n 为奇数时,调用函数 1/1+1/3+...+1/n package cs ...
- Eclipse阿里代码规范插件安装，卸载与使用
使用阿里代码规范插件,我们就可以查看我们写的代码是否规范了 找到阿里代码插件网址: 网址:https://p3c.alibaba.com/plugin/eclipse/update/ 打开我们的网址, ...
- selenium3 web自动化测试框架 二：页面基础操作、元素定位方法封装、页面操作方法封装
学习目的: 掌握自动化框架中需要的一些基础web操作 正式步骤: 使用title_contains检查页面是否正确 # -*- coding:utf-8 -*- import time from se ...
- jstack使用
top -p 22072 -H -p:查看某个进程 -H列出所有的线程 printf '%x' 22398 (16进制线程号) sudo -u tomcat jstack 22072 | grep ...
- Qt中mouseMoveEvent无效
最近用Qt软件界面,需要用到mouseMoveEvent,研究了下,发现些问题,分享一下. 在Qt中要捕捉鼠标移动事件需要重写MouseMoveEvent,但是MouseMoveEvent为了不太耗资 ...