&&&&用DIV+CSS技术设计的个人网页（网页制作课作业）
&用DIV+CSS技术设计的个人网页（网页制作课作业）
关于网页制作课程的作业，使用DIV+CSS技术设计的个人主页，有需要的朋友可以下载，挺简洁的
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
Q.为什么我点的下载下不了，但积分却被扣了
A. 由于下载人数众多，下载服务器做了并发的限制。若发现下载不了，请稍后再试，多次下载是不会重复扣分的。
Q.我的积分不多了，如何获取积分？
A. 获得积分，详细见。
完成任务获取积分。
论坛可用分兑换下载积分。
第一次绑定手机，将获得5个C币，C币可。
关注并绑定CSDNID，送10个下载分
下载资源意味着您已经同意遵守以下协议
资源的所有权益归上传用户所有
未经权益所有人同意，不得将资源中的内容挪作商业或盈利用途
CSDN下载频道仅提供交流平台，并不能对任何下载资源负责
下载资源中如有侵权或不适当内容，
本站不保证本站提供的资源的准确性，安全性和完整性，同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
课程资源下载排行
您当前C币：0&&&可兑换 0 下载积分
兑换下载分:&
消耗C币:0&
立即兑换&&
兑换成功你当前的下载分为 。前去下载资源
你下载资源过于频繁，请输入验证码
如何快速获得积分？
你已经下载过该资源，再次下载不需要扣除积分
用DIV+CSS技术设计的个人网页（网页制作课作业）
所需积分：5
剩余积分：0
扫描微信二维码精彩活动、课程更新抢先知
VIP会员，免积分下载
会员到期时间：日
剩余下载次数：1000
用DIV+CSS技术设计的个人网页（网页制作课作业）
剩余次数：&&&&有效期截止到：
你还不是VIP会员VIP会员享免积分 . 专属通道极速下载
VIP下载次数已满VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员
你的VIP会员已过期VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员网易云课堂 - - 微专业 - - 前端开发工程师 - - 《页面制作》作业一：已知HTML结构和效果图如下：&div class="parent"&
&div class="side"&侧栏&/div&
&div class="main"&主栏&/div&&/div&要求如效果图中标注，且总体水平居中，两栏间距为10px，请写出这个两列布局的CSS，要求使用浮动布局方法，并需要清除浮动。解答：&!DOCTYPE html&&html lang="en"&&head&&meta charset="UTF-8"&&title&作业一&/title&&style type="text/css"&
*{margin:0;padding:0;}
width:810px;
height:200px;
background:#FFF;
margin:0 auto;
text-align:center;
line-height:200px;
color:white;
width:200px;
height:200px;
background:#FF0000;
float:left;
margin-right:10px;
width:600px;
height:200px;
background:#0000FF;
float:left;
.clearfix:after{content:'';display:table;clear:both;}
.clearfix{*zoom:1;}
&/style&&body&
&div class="parent clearfix"&
&div class="side"&侧栏&/div&
&div class="main"&主栏&/div&
&/body&&/html&实现效果：CSS考察点：总宽810px的设置总体水平居中布局侧栏200px宽度设置，主栏600px宽度设置侧栏和主栏的左右水平排列，侧栏和主栏之间有10px间距清除浮动实现作业二：有一个新闻标题，效果如图，标题宽度为200px，文字字体为宋体，加粗，文字大小为16px，颜色为黑色，行高为25px，要求单行显示并且超出时显示”…“，请按要求完成CSS。效果图：解答：&!DOCTYPE html&&html&&head&&meta charset="utf-8" /&&title type="text"&作业二&/title&&style&
*{margin:0;padding:0;}
h3.title_effect{
width:200px;
font:bold 16px/25px "宋体",sans-serif;
color:#000000;
line-height:25px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}&/style&&/head&&body&
&h3 class="title_effect"&标题文字标题文字标题文字标题文字标题文字标题文字&/h3&
&/body&&/body&&/html&实现效果：CSS考察点：宽度设置字体设置单行显示设置作业三：一个幻灯片效果如图：已知结构如下：&div class="slide"&
&!-- 图片省略 --&
&!-- 以下是指示器 --&
&div class="pointer"&&i class="current"&&/i&&i&&/i&&i&&/i&&/div&&/div&要求如效果图中标注，幻灯（slide）宽200px，高100px，指示器（pointer）在右下角，距离右边10px距离下边10px，指示器中的三个圆直径为10px，背景为黑色，间距为5px，当前选中项（current）为白色背景，请完成CSS，不需要兼容低版本IE。解答：
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8"&
&title&CSS单元作业3&/title&
.container {position:relative;width:200px;height:100px;overflow-y:hidden;background-color: rgb(189,215,238);}
.container img{ display:block;}
.container .silder {width:100%;}
.container .silder img{display:none;}
.container .silder img:first-child{display:block;}
.container .controls{ position:absolute;bottom:10px;right:5px;line-height:10px;z-index:99;}
.container .controls i {list-style:none outside none; float: left; height: 10px; line-height: 20px; width: 10px;border-radius: 10px; text-align: center; margin-right: 5px; }
.container .controls label {list-style:none outside none; float: left; height: 10px; line-height: 20px; width: 10px;border-radius: 10px; background-color:black;text-align:center;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
.container .controls label:hover {cursor:pointer;background-color:gray;}
.container input[type="radio"] { display: none;}
.controls ul li #lbl1 { /* background-color:*/
input[type="radio"][id="index1"]:checked ~.controls i #lbl1 {
background-color:white;
input[type="radio"][id="index1"]:checked ~.silder &.index1 {
display:block;
input[type="radio"][id="index1"]:checked
~.silder &.index2,.index3 {
display:none;
input[type="radio"][id="index2"]:checked
~.controls i #lbl2 {
background-color:white;
input[type="radio"][id="index2"]:checked ~.silder &.index2 {
display:block;
input[type="radio"][id="index2"]:checked
~.silder &.index1,.index3 {
display:none;
input[type="radio"][id="index3"]:checked ~.controls i #lbl3 {
background-color:white;
input[type="radio"][id="index3"]:checked
~.silder &.index3 {
display:block;
input[type="radio"][id="index3"]:checked
~.silder &.index1,.index3 {
display:none;
&div class="container"&
&input type="radio" name="silder" id="index1" checked /&
&input type="radio" name="silder" id="index2" /&
&input type="radio" name="silder" id="index3" /&
&div class="controls"&
&label for="index1" id="lbl1"&&/label&
&label for="index2" id="lbl2"&&/label&
&label for="index3" id="lbl3"&&/label&
&div class="silder"&
&img src="img1.png" alt="图片1" class="index1" id="img1" /&
&img src="img2.jpg" alt="图片2" class="index2" id="img2" /&
&img src="img3.jpg" alt="图片3" class="index3" id="img3" /&
&/html&实现效果：CSS考察点：幻灯宽高设置幻灯相对定位设置指示器绝对定位设置指示器距离右边10px设置，指示器距离下边10px设置三个圆圈设置（大小，水平排列，间距，背景色）
最新教程周点击榜
微信扫一扫