练习一
1. 要求：
2. 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ppt第一界面</title>
</head>
<body>
<div style="width:1000px ;height: 300px;">
<h1>工商银行电子汇款单</h1>
<table border=1"" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td colspan="2" width=9%><b>回单类型</b></td>
<!-- <td>回单类型</td> -->
<td width=35%>网上转账汇款</td>
<td colspan="2"><b>指令序号</b></td>
<!-- <td>指令序号</td> -->
<td width=45%>HQH0000000000000013878172</td>
</tr>
<tr>
<td rowspan="4" width=3%><b>收款人</b></td>
<td>户名</td>
<td>老牟</td>
<td rowspan="4" width=3%><b>付款人</b></td>
<td>户名</td>
<td>老刘</td>
</tr>
<tr>
<!-- <td>收款人</td> -->
<td><b>卡号</b></td>
<td>0000000000001</td>
<!-- <td>付款人</td> -->
<td><b>卡号</b></td>
<td>0000000000002</td>
</tr>
<tr>
<!-- <td>收款人</td> -->
<td>地区</td>
<td>南京</td>
<!-- <td>付款人</td> -->
<td>地区</td>
<td>杭州</td>
</tr>
<tr>
<!-- <td>收款人</td> -->
<td><b>网点</b></td>
<td>工商江苏南京业务处理中心</td>
<!-- <td>付款人</td> -->
<td><b>网点</b></td>
<td>江苏徐州业务中心</td>
</tr>
<tr>
<td colspan="2"><b>币种</b></td>
<!-- <td>币种</td> -->
<td>人民币</td>
<td colspan="2"><b>钞汇标志</b></td>
<!-- <td>钞汇标志</td> -->
<td><u>钞票</u></td>
</tr>
<tr>
<td colspan="2"><b>金额</b></td>
<!-- <td>金额</td> -->
<td>1.00元</td>
<td colspan="2"><b>手续费</b></td>
<!-- <td>手续费</td> -->
<td>0.57元</td>
</tr>
<tr>
<td colspan="2"><b>合计</b></td>
<!-- <td>合计</td> -->
<td colspan="4">人民币（大写）：壹圆整</td>
<!-- <td>人民币（大写）：壹圆整</td>
<td>人民币（大写）：壹圆整</td>
<td>人民币（大写）：壹圆整</td> -->
</tr>
<tr>
<td colspan="2"><b>交易时间</b></td>
<!-- <td>交易时间</td> -->
<td>2017年6月1日</td>
<td colspan="2"><b>时间戳</b></td>
<!-- <td>时间戳</td> -->
<td>2017-16-01-13.00.00。00000</td>
</tr>
</table>
<p>票据打印时间:2017-06-01 15:00:12</p>
<p><del>票据打印单位：江苏徐州业务中心</del></p>
<p>操作员：大曾</p>
</div>
</body>
</html>
3. 成果展示：
练习二
1. 要求：
2. 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>修改版</title>
</head>
<body>
<h1>将进酒 <small>君不见黄河之水天上来</small></h1>
<table>
<tr>
<td>
<img src="img/1667706378473.png" alt="李白" width="342px" height="540px">
</td>
<td>
<p>君不见黄河之水天上来，奔流到海不复回。</p>
<p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
<p>人生得意须尽欢，莫使金樽空对月。</p>
<p>天生我材必有用，千金散尽还复来。</p>
<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
<p>岑夫子，丹丘生，将进酒，杯莫停。</p>
<p>与君歌一曲，请君为我侧耳听。</p>
<p>钟鼓馔玉不足贵，但愿长醉不复醒。</p>
<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
<p>主人何为言少钱，径须沽取对君酌。</p>
<p>五花马，千金裘，</p>
<p>呼儿将出换美酒，与尔同销万古愁。</p>
</td>
</tr>
</table>
</body>
</html>
3. 成果展示：
练习三
1. 要求：
2. 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面三</title>
<style>
.news{
width: 1210px;
height: 50px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<h1>热门电影板块</h1>
<table width="1300px" class="news">
<tr>
<td>最近热门电影</td>
<td>热门</td>
<td>最新</td>
<td>豆瓣高分</td>
<td>冷门佳片</td>
<td>华语</td>
<td>欧美</td>
<td>韩国</td>
<td>日本</td>
<td>更多>></td>
</tr>
</table>
<table>
<tr>
<td><img src="img/movie1.jpg" alt="猜火车"></td>
<td><img src="img/movie2.jpg" alt="贝尔科实验"></td>
<td><img src="img/movie3.jpg" alt="加州公路巡警"></td>
<td><img src="img/movie4.jpg" alt="歌声不绝"></td>
</tr>
<tr>
<td>猜火车 8.1</td>
<td>贝尔科实验 6.0</td>
<td>加州公路巡警 6.8</td>
<td>歌声不绝 6.3</td>
</tr>
<tr>
<td><img src="img/movie5.jpg" alt="明日的我与昨日的我"></td>
<td><img src="img/movie6.jpg" alt="速度与激情8"></td>
<td><img src="img/movie7.jpg" alt="极速特工"></td>
<td><img src="img/movie8.jpg" alt="金刚狼3：殊死一战"></td>
</tr>
<tr>
<td>明日的我与昨日的我</td>
<td>速度与激情8</td>
<td>极速特工</td>
<td>金刚狼3：殊死一战</td>
</tr>
</table>
</body>
</html>
3. 成果展示 ：
练习四
1. 要求
2. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面四</title>
<style>
*{
margin: 0;
padding: 0;
}
div.box1{
width:300px;
text-align: center;
background-color:#CCC ;
}
div.box2{
width:300px;
height: 250px;
background-color: #E5E5E5;
}
table{
border-color:white;
}
div.box3{
width:300px;
text-align: center;
background-color:#CCC ;
}
</style>
</head>
<body>
<div class="box1">
用户注册
</div>
<div class="box2">
<table border="1" align="center" cellspacing="0" cellpadding="0">
<tr>
<td>用户名</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" value="男" name="hei" checked>男
<input type="radio" value="女" name="hei">女
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" value="写作" name="hobby">写作
<input type="checkbox" value="听音乐" name="hobby">听音乐
<input type="checkbox" value="体育" name="hobby">体育
</td>
</tr>
<tr>
<td>省份</td>
<td>
<select name="address" id="address">
<option value="陕西省">陕西省</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea name="自我介绍" id="自我介绍" cols="30" rows="10"></textarea>
</td>
</tr>
</table>
</div>
<div class="box3">
<input type="submit" value="提交">
<input type="reset" value="重置">
</div>
</body>
</html>
3. 成果展示
练习五
1. 要求
2. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面五</title>
<style>
.box1{
width: 170px;
height: 60px;
}
.box3{
margin-bottom: 400px;
font-size: 12px;
color: #A5A5A5;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<table class="out">
<tr>
<td>
<img src="./img/练习五.png" alt="qq图片">
</td>
<td>
<div class="box1"></div>
</td>
<td>
<div class="box2">
<p>欢迎注册QQ</p>
<p>每一天，乐在沟通。 <a href="#">免费靓号</a></p>
<p><input type="text" placeholder="昵称"></p>
<p><input type="password" placeholder="密码"></p>
<p>
<table>
<tr>
<td><select name="phone" id="phone"><option value="+86">+86</option></select></td>
<td><input type="text" placeholder="手机号码"></td>
</tr>
</table>
</p>
<p><img src="./img/立即注册.png" alt="注册" width="230px"></p>
</div>
</td>
<td>
<div class="box3">
<table>
<tr>
<td><img src="./img/练习五2.png" alt=""></td>
<td>简体中文</td>
<td>意见反馈</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
3. 成果展示
练习六
1. 要求
2. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面六</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.box1{
width: 900px;
height: 45px;
background-color: #51B7EC;
}
#a{
color: white;
margin-left: 20px;
}
div.box2{
float:right;
color: white;
margin-right: 200px;
}
div.box2>ul>li{
width: 70px;
list-style: none;
float: left;
border-right: 1px solid white;
}
a{
text-decoration: none;
color: #3E91DA;
}
div.box3{
width: 450px;
text-align: center;
border-right: 1px solid #EBEBEB;
float: left;
}
div.box4{
margin-left: 120px;
margin-top: 30px;
}
div.box4>ul>li{
width: 100px;
float: left;
border-right: 1px solid #C9C8D6;
}
div.box5{
width: 330px;
height: ;
float: right;
margin-top: 30px;
}
div.outbox{
width: 800px;
height: 250px;
}
p.int{
border-bottom: 1px solid #EBEBEB;
border-top: 1px solid #EBEBEB;
height: 40px;
}
.box6{
margin-top: 40px;
}
.news{
height: 40px;
}
</style>
</head>
<body>
<div class="box1">
<img src="./img/六.png" alt="">
<span id="a">QQ登录</span>
<div class="box2">
<ul>
<li>QQ登录</li>
<li>授权管理</li>
<li>申请接入</li>
</ul>
</div>
</div>
<div class="outbox">
<div class="box3">
<div class="news">账号密码登录</div>
<div class="news">推荐使用<a href="#">快速安全道路</a>，防止盗号。</div>
<div class="news"><input type="text" placeholder="支持QQ号/邮箱/手机号登录"></div>
<div class="news"><input type="password" placeholder="密码"></div>
<div class="news"><img src="./img/六2.png" alt="" width="180px"></div>
<div class="box4">
<ul>
<li>忘了密码？</li>
<li>注册新账号</li>
<li>意见反馈</li>
</ul>
</div>
</div>
<div class="box5">
<p class="int">
<a href="#">腾讯网</a> 将获得以下权限：
</p>
<p class="int">
<input type="checkbox" value="全选">  全选
</p>
<p>
<input type="checkbox" value="全选">  获得您的昵称、头像、性别及会员信息
</p>
<div class="box6">
授权后表明你已同意<a href="#">QQ登录服务协议</a>
</div>
</div>
</div>
</body>
</html>
3. 成果展示
练习七
1. 要求
2. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面七</title>
<style>
a{
text-decoration: none;
color: #309DD8;
font-size: 10px;
}
.big{
width: 1000px;
height: 300px;
border-top: 1px solid #E0E0E0;
position: relative;
}
.left{
width: 700px;
height: 300px;
border-right: 1px solid #E0E0E0;
}
.picture{
float: left;
}
.box{
width: px;
height: 300px;
float: left;
margin-left: 50px;
}
.all{
height: 50px;
}
.all3{
margin-left: 85px;
height: 30px;
font-size: 10px;
margin-top: 10px;
}
.min1{
float: left;
height: 42px;
}
.min2{
float: right;
}
.bottom{
margin-left: 110px;
}
div.right{
position: absolute;
left: 700px;
}
</style>
</head>
<body>
<div class="big">
<div class="left">
<div class="picture">
<img src="./img/七.png" alt="" width="60px">
</div>
<div class="box">
<div class="all2">*手机号码: <input type="text"></div>
<div class="all3">使用微博账号直接<a href="#">登录</a></div>
<div class="all">*设置密码: <input type="password"></div>
<div class="all">
<div class="min1">
*兴趣标签:
</div>
<div class="min2">
<div>
<input type="checkbox" value="新闻">新闻
<input type="checkbox" value="娱乐">娱乐
<input type="checkbox" value="文化">文化
<input type="checkbox" value="体育">体育
<input type="checkbox" value="IT">IT
</div>
<div>
<input type="checkbox" value="财经">财经
<input type="checkbox" value="时尚">时尚
<input type="checkbox" value="汽车">汽车
<input type="checkbox" value="房产">房产
<input type="checkbox" value="生活">生活
</div>
</div>
</div>
<div class="all">
*上发短信手机: <button>我要使用注册手机发送短信</button>
</div>
<div class="bottom">
<p><a href="#">《新浪网络服务使用协议》</a></p>
<p><a href="#">《新浪个人信息保护政策》</a></p>
</div>
</div>
<div class="right">已有账号，<a href="#">直接登录>></a></div>
</div>
</body>
</html>
3. 成果展示
练习八
1. 要求
2. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网易云</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.up {
width: 100%;
height: 68px;
background-color: #242424;
position: relative;
}
.picture{
position: absolute;
left: 23%;
}
.list1{
width: 540px;
height: 68px;
position: absolute;
left: 32%;
}
.list1 li{
width: 90px;
height: 68px;
float: left;
color: white;
line-height: 68px;
font-size: 14px;
text-align: center;
}
.list1 li:hover{
background-color: #000000;
}
.list2{
position: absolute;
left: 68%;
line-height: 30px;
}
.list2 div{
float: left;
}
.ace{
color: #7B7977;
width: 80px;
height: 30px;
border: 1px solid #4C4C4C;
border-radius: 20px;
font-size: 14px;
text-align: center;
margin-top: 20px;
}
.ace:hover{
border-color: white;
color: white;
}
.aec>a{
color: #656565;
text-decoration: none;
}
.aec{
width: 60px;
font-size: 14px;
text-align: center;
line-height: 68px;
}
.aec>a:hover{
color: #464343;
text-decoration: underline;
}
.up2{
width: 100%;
height: 33px;
background-color: #C20C0C;
position: relative;
}
.list3{
position: absolute;
left: 32%;
font-size: 12px;
}
.up2 .li{
color: white;
width: 90px;
height: 33px;
float: left;
line-height: 33px;
text-align: center;
border-radius: 30px;
}
.li:hover{
background-color: #9B0909;
}
.up3{
width: 100%;
height: 270px;
background-color: #526279;
}
.pi{
width: 922px;
height: 270px;
margin: auto;
}
.botton{
width: 204px;
height: 55px;
background-color: #2668C8;
color: white;
font-size: 26px;
text-align: center;
line-height: 55px;
position: absolute;
right: 23.5%;
top: 30.5%;
}
.botton:hover{
background-color: #2958CB;
}
.mid{
width: 920px;
height: 530px;
margin: auto;
border-left: 1px solid #D3D3D3;
border-right: 1px solid #D3D3D3;
position: relative;
}
.left{
width: 684px;
height: 530px;
border-right: 1px solid #D3D3D3;
}
.list4{
width: 646px;
height: 50px;
border-bottom: 1px solid #C10D0C;
margin: auto;
}
.l1{
width: 90px;
float: left;
font-size: 20px;
margin-top: 16px;
}
.l2{
float: left;
font-size: 12px;
margin-top: 25px;
}
.l2 a{
text-decoration: none;
color: #666666;
}
.l2 a:hover{
text-decoration: underline;
}
.list4 li{
width: 60px;
float: left;
border-right: 1px solid #666666;
text-align: center;
}
.l3{
float: right;
font-size: 12px;
margin-top: 25px;
color: #666666;
}
.right{
width: 235px;
height: 530px;
float: right;
/* background-color: #ccc; */
position: absolute;
right: 0px;
bottom: 0px;
}
.main-out{
width: 680px;
height: 480px;
border-bottom: 1px solid #C10D0C;
}
.main{
width: 132px;
height: 200px;
/* background-color: #ccc; */
position: relative;
float: left;
margin-left: 32px;
margin-top: 16px;
}
.p{
width: 132px;
height: 132px;
background-image: url(img/wyy01.jpg);
}
.r202{
font-size: 12px;
float: left;
margin-top: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="up">
<div class="picture"><img src="./img/wyy001.png" alt=""></div>
<div class="list1">
<ul>
<li>发现音乐</li>
<li>我的音乐</li>
<li>关注</li>
<li>商城</li>
<li>音乐人</li>
<li>下载客户端</li>
</ul>
</div>
<div class="list2">
<div style="width: 160px; text-align: center; line-height: 68px;"><input type="text" placeholder="音乐/视频/电台/用户" style="width: 140px; height: 30px; font-size: 14px; border-radius: 20px; text-align: center;"></div>
<div class="ace">创作者中心</div>
<div class="aec"><a href="#">登录</a></div>
</div>
</div>
<div class="up2">
<div class="list3">
<div class="li">推荐</div>
<div class="li">排行榜</div>
<div class="li">歌单</div>
<div class="li">主播电台</div>
<div class="li">歌手</div>
<div class="li">新碟上架</div>
</div>
</div>
<div class="up3">
<div class="pi">
<div style="float: left;"><img src="./img/wyy.jpg" alt="" style="width: 685px; height: 270px;"></div>
<div class="picture3" style="float: right; position: relative;"><img src="./img/wyy09.jpg" alt="" style="width: 237px; height: 270px;"></div>
<div class="botton">下载客户端</div>
</div>
</div>
<div class="mid">
<div class="left">
<div class="list4">
<div class="l1">热门推荐</div>
<div class="l2">
<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 class="l3">更多>></div>
</div>
<div class="main-out">
<div class="main">
<div class="p"></div>
<div class="float" style="font-size: 10px; background-color: rgba(6, 6, 6, 0.3); width: 132px; height: 25px; line-height: 25px; position: absolute; bottom: 69px;">2452万</div>
<div class="text" style="font-size: 14px;">假如能回到过去，你想做什么</div>
</div>
<div class="main">
<div class="p"></div>
<div class="float" style="font-size: 10px; background-color: rgba(6, 6, 6, 0.3); width: 132px; height: 25px; line-height: 25px; position: absolute; bottom: 69px;">2452万</div>
<div class="text" style="font-size: 14px;">假如能回到过去，你想做什么</div>
</div>
<div class="main">
<div class="p"></div>
<div class="float" style="font-size: 10px; background-color: rgba(6, 6, 6, 0.3); width: 132px; height: 25px; line-height: 25px; position: absolute; bottom: 69px;">2452万</div>
<div class="text" style="font-size: 14px;">假如能回到过去，你想做什么</div>
</div>
<div class="main">
<div class="p"></div>
<div class="float" style="font-size: 10px; background-color: rgba(6, 6, 6, 0.3); width: 132px; height: 25px; line-height: 25px; position: absolute; bottom: 69px;">2452万</div>
<div class="text" style="font-size: 14px;">假如能回到过去，你想做什么</div>
</div>
<div class="main">
<div class="p"></div>
<div class="float" style="font-size: 10px; background-color: rgba(6, 6, 6, 0.3); width: 132px; height: 25px; line-height: 25px; position: absolute; bottom: 69px;">2452万</div>
<div class="text" style="font-size: 14px;">假如能回到过去，你想做什么</div>
</div>
<div class="main">
<div class="p"></div>
<div class="float" style="font-size: 10px; background-color: rgba(6, 6, 6, 0.3); width: 132px; height: 25px; line-height: 25px; position: absolute; bottom: 69px;">2452万</div>
<div class="text" style="font-size: 14px;">假如能回到过去，你想做什么</div>
</div>
<div class="main">
<div class="p"></div>
<div class="float" style="font-size: 10px; background-color: rgba(6, 6, 6, 0.3); width: 132px; height: 25px; line-height: 25px; position: absolute; bottom: 69px;">2452万</div>
<div class="text" style="font-size: 14px;">假如能回到过去，你想做什么</div>
</div>
<div class="main">
<div class="p"></div>
<div class="float" style="font-size: 10px; background-color: rgba(6, 6, 6, 0.3); width: 132px; height: 25px; line-height: 25px; position: absolute; bottom: 69px;">2452万</div>
<div class="text" style="font-size: 14px;">假如能回到过去，你想做什么</div>
</div>
</div>
</div>
<div class="right"">
<div class="r1" style="background-color: #EDEDED; width: 235px; height: 118px;">
<div class="z" style="width: 200px; font-size: 12px; color: #666666; margin: auto;position: absolute; top: 20px; right: 12px;">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</div>
<div class="bo" style="color: white; background-color: #D51218; width: 93px; height: 28px; line-height: 28px; border-radius: 4px; font-size: 13px; text-align: center; position: absolute; top: 70px; right: 70px;">用户登录</div>
</div>
<div class="r2">
<div class="r201" style="margin: auto; width: 210px; height: 40px; border-bottom: 1px solid #CCCCCC;">
<div class="r202"><b>入住歌手</b></div>
<span style="font-size: 12px; float: right; color: #666666; margin-top: 20px;">查看全部>></span>
</div>
<div class="r202" style="width: 210px; height: 70px; margin-left: 14px;">
<div class="rp" style="width: 210px; height: 70px; background-color: #fafafa; ">
<div class="pic" style=" width: 70px; height: 70px; background-image: url(img/wyy03.jpg); background-size: cover;"></div>
</div>
</div>
<div class="r202" style="width: 210px; height: 70px; margin-left: 14px;">
<div class="rp" style="width: 210px; height: 70px; background-color: #fafafa; ">
<div class="pic" style=" width: 70px; height: 70px; background-image: url(img/wyy03.jpg); background-size: cover;"></div>
</div>
</div>
<div class="r202" style="width: 210px; height: 70px; margin-left: 14px;">
<div class="rp" style="width: 210px; height: 70px; background-color: #fafafa; ">
<div class="pic" style=" width: 70px; height: 70px; background-image: url(img/wyy03.jpg); background-size: cover;"></div>
</div>
</div>
<div class="r202" style="width: 210px; height: 70px; margin-left: 14px;">
<div class="rp" style="width: 210px; height: 70px; background-color: #fafafa; ">
<div class="pic" style=" width: 70px; height: 70px; background-image: url(img/wyy03.jpg); background-size: cover;"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
3. 成果展示
学校官网
1. 要求
2. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轻化工官网</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.top1{
width: 100%;
height: 317px;
background-color: #DE121B;
}
.p1{
width: 1100px;
height: 395px;
background-image: url(img/qhg03.jpg);
background-repeat: no-repeat;
/* background-position: center top; */
margin: auto;
position: relative;
}
input::placeholder{color: #800000;}
.input{
position: absolute;
right: 10px;
top: 10px;
}
.top2{
width: 100%;
height: 38px;
background-color: #741B21;
position: relative;
}
.list1{
position: absolute;
left: 330px;
}
.top2 li{
width: 100px;
height: 38px;
float: left;
color: white;
font-size: 14px;
line-height: 38px;
}
#h{
width: 150px;
}
.top2 li:hover{
color: #FFCC00;
cursor: pointer;
}
.mid{
width: 1100px;
height: 1100px;
margin: auto;
position: relative;
}
.p2{
width: 1100px;
height: 385px;
background-image: url(img/qhg02.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.list2{
width: 787px;
height: 36px;
border-bottom: 3px solid #9A1712;
float: left;
}
.list2>div{
width: 105px;
margin-top: 12px;
float: left;
}
.l3:hover{
cursor: pointer;
}
.list3{
float: right;
width: 306px;
height: 36px;
/* border: 1px solid red; */
border-bottom: 3px solid #9A1712;
}
.n1{
width: 370px;
height: 232px;
position: absolute;
top: 426px;
}
.p3{
width: 370px;
height: 208px;
background-image: url(img/qhg05.jpg);
background-size: cover;
}
.n1 a{
color: #333399;
text-decoration: none;
}
.n1 a:hover{
color: #FF6600;
}
.n2{
position: absolute;
left: 386px;
top: 426px;
}
.list4,.list5{
margin-top: 3px;
}
.list4 li,.list5 li{
font-size: 12px;
height: 30px;
color: #003366;
}
.list4 li:hover{
cursor: pointer;
}
.list5{
position: absolute;
left: 330px;
bottom: 0px;
}
.list5 li{
width: 67px;
}
.n3{
width: 306px;
position: absolute;
right: 0px;
top: 435px;
/* background-color: #FFCC00; */
}
.n301{
height: 78px;
margin-left: 5px;
}
.p4{
width: 71px;
height: 65px;
background-image: url(img/qhgzr.png);
background-size: cover;
float: left;
}
.list6{
float: left;
margin-left: 15px;
/* background-color: #FFCC00; */
}
.list6 li{
font-size: 12px;
height: 23px;
line-height: 23px;
}
.list6 a{
font-size: 14px;
color: #012F60;
text-decoration: none;
}
.list7,.list8{
width: 370px;
height: 36px;
/* background-color: #FFCC00; */
position: absolute;
top: 665px;
border-bottom: 3px solid #9A1712;
line-height: 36px;
}
.list8{
position: absolute;
left: 383px;
}
.list9,.list10,.n5{
width: 295px;
position: absolute;
top: 710px;
font-size: 12px;
}
.list9 li,.list10 li,.n5 li{
height: 25px;
color: #797979;
}
.list9 li:hover,.n5 li:hover{
color: #000;
cursor: pointer;
}
.list10{
position: absolute;
top: 710px;
left: 300px;
}
.n5{
position: absolute;
left: 385px;
width: 370px;
}
.n6,.n7{
width: 150px;
position: absolute;
right: 175px;
top: 680px;
}
.n601,.n701{
width: 150px;
height: 38px;
background-color: #B5CDB5;
text-align: center;
line-height: 38px;
color: white;
}
.n602{
margin-left: 26px;
}
.n602 li,.n702 li{
font-size: 14px;
height: 23px;
}
.n7{
position: absolute;
right: 20px;
}
.n701{
background-color: #A9A9A9;
}
.n702{
margin-left: 30px;
}
.p7{
width: 150px;
height: 32px;
background-image: url(img/qhg07.png);
position: absolute;
right: 175px;
top: 905px;
}
.p7:hover,.p8:hover{
cursor: pointer;
}
.p8{
width: 150px;
height: 32px;
background-image: url(img/qhg08.png);
position: absolute;
right: 15px;
top: 905px;
}
</style>
</head>
<body>
<div class="top1">
<div class="p1">
<div class="input"><input type="text" placeholder="请输入关键字搜索" style="height: 19px;;"> <input type="submit" id="搜索" name="搜索" /></div>
</div>
</div>
<div class="top2">
<div class="list1">
<ul>
<li><b>学校首页</b></li>
<li><b>校情总览</b></li>
<li><b>人才培养</b></li>
<li><b>科学研究</b></li>
<li><b>师资队伍</b></li>
<li><b>招生就业</b></li>
<li><b>思政教育</b></li>
<li id="h"><b>校友会与校基金会</b></li>
<li><b>信息服务</b></li>
<li><b>人才招聘</b></li>
</ul>
</div>
</div>
<div class="mid">
<div class="p2"></div>
<div class="list2">
<div class="l1" style="margin-left: 10px;">新闻图片</div>
<div class="l2" style="margin-left: 270px;">综合新闻</div>
<div class="l3" style="margin-left: 190px; font-size: 14px;">>>进入新闻网</div>
</div>
<div class="list3"><div style="margin-top: 12px;">学术报告</div></div>
<div class="n1">
<div class="p3"></div>
<div class="a" style="text-align: center"><b><a href="#">颜杰副校长参加应用技术学院党总支组织生活会</a></b></div>
</div>
<div class="n2">
<div class="list4">
<ul>
<li>对话协商 共建共享 交流互鉴——第三届中印巴国际...</li>
<li>学校召开“对标竞进 争创一流”管理科学与工程学科...</li>
<li>颜杰副校长参加应用技术学院党总支组织生活会.</li>
<li>【学习贯彻党的二十大精神】深学细悟扬清风创新实干...</li>
<li>庹先国校长出席2022年财经工作暨2023年预算...</li>
<li>【疫情防控 人人有责】疫情防控期间学校教职工怎样....</li>
<li>【学习党的二十大精神】加快建设人才强国</li>
<li>【学习党的二十大精神】加快实施创新驱动发展战略</li>
</ul>
</div>
<div class="list5">
<ul>
<li>2022-11-11</li>
<li>2022-11-11</li>
<li>2022-11-10</li>
<li>2022-11-10</li>
<li>2022-11-10</li>
<li>2022-11-10</li>
<li>2022-11-10</li>
<li>2022-11-10</li>
</ul>
</div>
</div>
<div class="n3">
<div class="n301">
<div class="p4"></div>
<div class="list6">
<ul>
<li><a href="#">化学工程的目标与真谛</a></li>
<li>报告人：祝京旭 院士</li>
<li>地点：汇南校区学术报告厅</li>
</ul>
</div>
</div>
<div class="n301">
<div class="p4"></div>
<div class="list6">
<ul>
<li><a href="#">院士公开课-物质结构与原子团簇</a></li>
<li>主讲人：郑兰荪 院士</li>
<li>地点：汇南校区第四实验楼0305教室</li>
</ul>
</div>
</div>
<div class="n301">
<div class="p4"></div>
<div class="list6">
<ul>
<li><a href="#">仿生超浸润界面体系——基于量子</a></li>
<li>报告人：江雷 院士</li>
<li>地点： 汇南校区学术报告厅</li>
</ul>
</div>
</div>
</div>
<div class="list7">
<div style="float: left; margin: 5px;">通知通告</div>
<div style="float: right; margin: 5px; font-size: 14px; color: #9C8F99;">>></div>
</div>
<div class="list8">
<div style="float: left; margin: 5px;">校园快讯</div>
<div style="float: right; margin: 5px; font-size: 14px; color: #9C8F99;">>></div>
</div>
<div class="n4">
<div class="list9">
<ul>
<li>巡察公告（2022年第10号）</li>
<li>关于2022-2023学年国家助学金受助学生名..</li>
<li>关于第一批校级党建品牌“标杆院系”“样板支部”..</li>
<li>关于四川轻化工大学2021年度校级优秀基层教学..</li>
<li>四川轻化工大学2023届毕业生双选会期间新冠疫..</li>
<li>巡察公告（2022年第9号）.</li>
<li>四川轻化工大学后勤服务总公司2022年考核招聘..</li>
<li>四川轻化工大学关于2022年研究生学业奖学金评..</li>
<li>关于2021-2022学年国家奖学金初审名单的..</li>
<li>关于2021-2022学年国家励志奖学金初审名..</li>
<li>四川轻化工大学关于2022年研究生国家奖学金评..</li>
<li>四川轻化工大学关于2022-2023学年无固定..</li>
<li>四川轻化工大学后勤服务总公司2022年考核招聘..</li>
</ul>
</div>
<div class="list10">
<ul>
<li>2022-11-10</li>
<li>2022-11-08</li>
<li>2022-11-03</li>
<li>2022-11-03</li>
<li>2022-10-31</li>
<li>2022-10-27</li>
<li>2022-10-26</li>
<li>2022-10-24</li>
<li>2022-10-24</li>
<li>2022-10-24</li>
<li>2022-10-24</li>
<li>2022-10-24</li>
<li>2022-10-18</li>
</ul>
</div>
</div>
<div class="n5">
<ul>
<li>法学院邓中文教授为宜宾市翠屏区司法局作专题讲座</li>
<li>土木工程学院召开排球队换届大会</li>
<li>后勤第一支部召开11月支部组织生活会</li>
<li>人文学院开展“119消防宣传日”安全主题活动</li>
<li>人文学院召开征兵工作动员会</li>
<li>西南科技大学国际合作与交流处莅校交流</li>
<li>物理与电子工程学院优秀校友作分享交流</li>
<li>外语学院举办第二期跨境电商培训</li>
<li>学校与维纳教育集团举行“教育实习基地”签约暨授牌仪式</li>
<li>教育与心理科学学院承办“强国复兴有我”演讲比赛</li>
<li>美术学院视觉传达设计教研室荣获2021年度校级优秀基层...</li>
<li>计算机科学与工程学院开展2022年下半年团校培训</li>
<li>能源管理服务中心分秒必争抢修李白河校区主水管</li>
</ul>
</div>
<div class="n6">
<div class="n601"><h2>校内访问</h2></div>
<div class="n602">
<ul>
<li>OA办公系统</li>
<li>教务管理系统</li>
<li>科研管理系统</li>
<li>认证客户端</li>
<li>国资管理系统</li>
<li>校务公开</li>
<li>本科教学评估</li>
<li>公共资源交易</li>
</ul>
</div>
</div>
<div class="n7">
<div class="n701"><h2>校外访问</h2></div>
<div class="n702">
<ul>
<li>OA办公系统</li>
<li>教务管理系统</li>
<li>图片资源</li>
<li>电子邮件系统</li>
<li>学术期刊</li>
<li>课程资源中心</li>
<li>OA辅助程序安装包</li>
<li>公共资源交易</li>
</ul>
</div>
</div>
<div class="p7"></div>
<div class="p8"></div>
</div>
</body>
</html>
3. 成果展示
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
