Project 1 Hoverbox image gallery
Page renderings:
Require:
The mouse over the picture shows the big picture.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hoverbox图像画廊</title>
<link type="text/css" rel="stylesheet" href='hoverbox.css'>
</link>
</head>
<body>
<div id="" class="">
<h1>鼠标经过图片放大显示大图(Hoverbox Image Gallery)</h1>
<u1 class="hoverbox">
<li><a href="#">
<img src="img/photo01.jpg" alt="description" class="preview"/>
<img src="img/photo01.jpg" alt="description"/>
</a></li>
<li>
<a href="#">
<img src="img/photo02.jpg" alt="description" class="preview"/>
<img src="img/photo02.jpg" alt="description"/>
</a>
</li>
<li>
<a href="#">
<img src="img/photo03.jpg" alt="description" class="preview"/>
<img src="img/photo03.jpg" alt="description"/>
</a>
</li>
<li>
<a href="#">
<img src="img/photo04.jpg" alt="description" class="preview"/>
<img src="img/photo04.jpg" alt="description"/>
</a>
</li>
<li>
<a href="#">
<img src="img/photo05.jpg" alt="description" class="preview"/>
<img src="img/photo05.jpg" alt="description"/>
</a>
</li>
<li>
<a href="#">
<img src="img/photo06.jpg" alt="description" class="preview"/>
<img src="img/photo06.jpg" alt="description"/>
</a>
</li>
<li>
<a href="#">
<img src="img/photo07.jpg" alt="description" class="preview"/>
<img src="img/photo07.jpg" alt="description"/>
</a>
</li>
<li>
<a href="#">
<img src="img/photo08.jpg" alt="description" class="preview"/>
<img src="img/photo08.jpg" alt="description"/>
</a>
</li>
<li>
<a href="#">
<img src="img/photo09.jpg" alt="description" class="preview"/>
<img src="img/photo09.jpg" alt="description"/>
</a>
</li>
<li>
<a href="#">
<img src="img/photo10.jpg" alt="description" class="preview"/>
<img src="img/photo10.jpg" alt="description"/>
</a>
</li>
</u1>
</div>
</body>
</html>
CSS styles:
/* hoverbox.css */
*{
/* 全局声明 */
border: 0;
margin: 0;
padding: 0;
}
/* =Basic HTML, Non-essential
----------------------------------------------------------------------*/
a{
text-decoration: none;}
div{
/* 定义图层的样式*/
width:720px;
height:500px;
margin:0 auto;
padding:30px;
text-align:center; /* 定义内容居中显示 */
}
body{
/* 定义主体样式 */
position: relative; /* 位置属性为相对的 */
text-align:center;
}
h1{
/* 定义H1的样式 */
background: inherit; /* 定义背景属性取值为继承 */
border-bottom: 1px dashed red;/*#097;*/
color: #000099;
font: 17px Georgia, serif;
margin: 0 0 10px;
padding: 0 0 35px;
text-align: center;
}
/* =Hoverbox Code
----------------------------------------------------------------------*/
.hoverbox{
cursor: default;list-style: none;} /* 去掉列表项前的符号 */
.hoverbox a{
cursor: default;}
.hoverbox a .preview{
display: none;} /* 大图初始加载为不显示 */
.hoverbox a:hover .preview{
/* 派生选择器声明 */
display: block; /* 以块方式显示 */
position: absolute; /* 以绝对方式显示，图可以层叠 */
top: -33px; /* 相对当前位置偏移量*/
left: -45px; /* 相对当前位置偏移量*/
z-index: 1; /* 表示在上层（原小在底层） */
}
.hoverbox img{
/* 定义图像样式 */
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}
.hoverbox li{
/* 定义列表项样式 */
background: #eee; /* #eee等同于#eeeeee ,以下格式相同*/
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
float: left; /* 设置图像向左浮动 */
display: inline; /* 设置为行内显示 */
margin: 3px;
padding: 5px;
position: relative; /*位置为相对的方式*/
}
.hoverbox .preview{
/* 定义大图样式 */
border-color: #000;
width: 200px;
height: 150px;
}
ul{
padding:40px;margin:0 auto; } /* 定义ul样式 */
Project 2 Web front-end development engineer job content
Web page renderings:
Require:
Front-end development engineer job content.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web前端开发工程师工作内容</title>
<style type="text/css">
*{
font-family: "楷体";color:blue}
#li1{
font: italic bold 24px "黑体";}
#li2{
background: #9999cc;letter-spacing: 1px;}
#li3{
font-size: 18px;color: red;}
#li4{
color: #0000cc;background: #c0c0c0;font-family: "隶书";}
</style>
</head>
<body>
<h1>Web前端开发工程师工作内容</h1>
<h3>web前端开发工程师工作内容在不同公司，会有不同的职能，但称呼都是类似的。</h3>
<ul>
<li id="li1">做网站设计，网页界面开发</li>
<li id="li2">做网页界面开发</li>
<li id="li3">做网页界面开发、前台数据绑定和前台逻辑的处理</li>
<li id="li4">设计、开发、数据处理</li>
</ul>
</body>
</body>
</html>
Item 3 picture overlay
Page renderings:
Require:
Build a simple news style page.
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻</title>
<link type="text/css" rel="stylesheet" href="exp_8_1.css">
</link>
</head>
<body>
<div id="d1">
<img src="exp_8_1.jpg">
<ul>
<li>2017<span class="b">央视</span>节目发力 彰显公益大爱</li>
<li>继北京，上海<span class="b">腾讯</span>又在广州隆重举行</li>
<li>“<span class="b">跨界融合 开放共赢</span>”移动互联网营销峰会</li>
<li>首届<span class="it">“联建杯”</span>户外LED显示屏媒体大赛评审圆满落幕</li>
</ul>
</div>
</body>
</html>
css style
/* exp_8_1.css */
#d1{
width:600px;
height:380px;
background-color:Lime;
}
#d2{
font-family:"幼圆";
font-size:20px;
}
.b{
font-weight:bold;
text-decoration:underline;
color:red;
}
.it{
font-style:italic;font-size:24px;font-weight:bold;}