企业网站综合布局实战_学习笔记

首页免费课企业网站综合布局实战笔记

企业网站综合布局实战

最热最新

慕沐457181

<body>

<ul>
<li>首页</li>
<li>课程中心</li>
<ul>
<li>Web前端</li>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
<li>Android开发</li>
<li>PHP开发</li>
</ul>
</ul>
</body>

查看全部

0 采集收起来源：编程练习
2019-08-21
慕沐457181

.mainBox{
width:960px;
background-color:#CFF;
height:300px;
float:left;
}
.leftBox{
width:740px;
background-color:#C9F;
height:300px;
float:left;
}
.rightBox{
width:210px;
background-color:#FCF;
height:300px;
float:right;
}

</style>
</head>

<body>


<div class='mainBox'>
<div class='leftBox'></div>
<div class='rightBox'></div>

查看全部

0 采集收起来源：编程练习
2019-08-20
晓塘Little
1. 盒子模型中实现文字在垂直方向上居中：可以设置行高=盒子高度
2. text-decoraton 下划线
查看全部

1 采集收起来源：企业网站制作之页面头部制作（一）
2019-08-16
qq_慕先生4527999

list-style-type：none；去除列表表头符号
text-decoration:none; 去除a标签下划线

查看全部

0 采集收起来源：企业网站制作之导航部分制作（二）
2019-08-15
qq_慕先生4527999

a:link 控制超链接初始状态
a:visited 控制超链接访问之后的状态
a:hover 控制超链接鼠标经过时的状态
a:active 控制超链接点击时的状态

查看全部

1 采集收起来源：企业网站制作之页面头部制作（一）
2019-08-15
慕UI0546179

list-style-image可以把图像设置为列表中的项目符号；list-style-type可以设置列表项目符号的不同样式，如：none表示无项目符号，disc表示实心圆（默认值），circle表示空心圆，square表示实心方块等。

查看全部

0 采集收起来源：练习题
2019-08-05
慕UI0546179

background-image: url(文件路径) no-repeat（默认是重复，不重复写no-repeat）水平方向（left/right）垂直方向（center垂直居中）。

查看全部

0 采集收起来源：企业网站制作之导航部分制作（二）
2019-08-05
慕UI0546179

div浮动后，因无内容无height，一般会不显示。要想无内容显示出来需要设定height就ok了。

查看全部

0 采集收起来源：企业网站制作之导航部分制作（一）
2019-08-05
慕UI0546179

内联元素和块级元素的区别：
内联元素是在一行中显示。块级元素是单独一行显示。

查看全部

0 采集收起来源：企业网站制作之页面头部制作（二）
2019-08-05
慕UI0546179

图片与文字的居中对齐，设置图片的vertical-align:middle。设置图片与文字有间距，为图片设置margin-right:10px。

查看全部

0 采集收起来源：企业网站制作之页面头部制作（二）
2019-08-05
慕UI0546179 08:22

小技巧：文字垂直居中使用line-height=height的像素即可。

查看全部

0 采集收起来源：企业网站制作之页面头部制作（一）
2019-08-05
慕UI0546179 07:33

li右浮动后，显示的是设为首页在最右侧，联系我们在右边的最左侧。
原因是：设为首页的li右浮动的时候，已经脱离文档流，在碰到父元素top_content的最右侧边缘的时候停下来显示。
当加入收藏li右浮动的时候，在碰到最右侧的设置首页li的边缘后停下显示。
联系我们li右浮动的时候，在碰到最右侧加入收藏的li右边缘后停下显示。
解决办法：将联系我们和设为首页互相换位置。

查看全部

0 采集收起来源：企业网站制作之页面头部制作（一）
2019-08-05
慕UI0546179
1. 设置一个div在页面中居中的方法：
  设定这个div的宽度，并设置这个div的margin左右为auto。
2. 统一给li前加小箭头背景图片list-style-image
  .top_content li {
list-style-image：url(图片路径格式);
}
查看全部

1 采集收起来源：企业网站制作之页面头部制作（一）
2019-08-05
weixin_慕少2513486

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>3.10新闻中心制作评测题</title>
<style type="text/css">

/*在此定义相关CSS样式*/

.topList{
width:300px;
height:180px;
border:1px solid #E8E8E8;
margin:0 auto;
}
ul{
list-style-type:none;
margin-top:-18px;
padding:5px;
}
li {
height:16px;
}
em{
width:20px;
height:16px;
text-align:center;
font-style:normal;
font-size:10px;
color:#333;
background:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg);
background-position:0px 16px;
display:block;
float:left;
}
.top em{
background:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg);
color:white;
}
a{
font-size:10px;
}
a:link,a:visited{
text-decoration:none;
color:black;
}
a:hover,a:active{
text-decoration:none;
color:red;
}

</style>
</head>

<body>
<div class="topList">
<ul>
<li class="top"><em>01</em>
<p><a href="http://www.imooc.com/" >【慕客访谈用户篇】“有为屌丝”在路上</a></p>
</li>
<li class="top"><em>02</em>
<p><a href="http://www.imooc.com/">【有奖活动】给父亲的三行书信</a></p>
</li>
<li class="top"><em>03</em>
<p><a href="http://www.imooc.com/">《程序猿，请晒出你的童年》活动获奖公告</a></p>
</li>
<li><em>04</em>
<p><a href="http://www.imooc.com/">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a></p>
</li>
<li><em>05</em>
<p><a href="http://www.imooc.com/">【获奖公告】追“球”巅峰，争当“预言帝”</a></p>
</li>
<li><em>06</em>
<p><a href="http://www.imooc.com/">【问卷调查】慕课网用户学习情况大调查</a></p>
</li>
</ul>
</div>
</body>

查看全部

0 采集收起来源：编程练习
2019-08-04
琳琳铛

TOP排行榜列表

查看全部

0 采集收起来源：编程练习
2019-07-17
琳琳铛 11:41

图片轮播的教学网址

查看全部

0 采集收起来源：企业网站制作之焦点图制作
2019-07-17

首页上一页 3 4 5 6 7 8 9 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1. 您已具备HTML 常用标签和属性。 2. 您已具备CSS 常用属性和值。 3. 您想提升网页布局技能。

老师告诉你能学到什么？: 1.CSS中盒子模型的使用 2.网页三列布局方法 3.两列自适应高度布局方法 4.幻灯片切换效果的制作方法 5.导航菜单的制作方法

微信扫码，参与3人拼团

热搜

最近搜索清空

企业网站综合布局实战