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

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

企业网站综合布局实战

最热最新

慕码人9704115

body,p,ul{margin: 0;padding: 0}
/*在此定义相关CSS样式*/
.topList{
    width:300px;
    height:180px;
    border: 1px solid #E8E8E8;
    margin: 0 auto;
}
ul {list-style: none;}

.topList p{
    float: left;
    height:16px;
    margin-top: 4px;
    font-size:12px;
    line-height:16px;
}

.topList li {
    overflow: hidden;
    margin: 5px 0;
}

.topList em {
    width:20px;
    height:16px;
    margin: 4px 4px;
    font-size:12px;
    text-align:center;
    line-height:16px;
    display:block;
    float:left;
    background-image:url("http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg");
    background-position: bottom;
}

.top > em {
    background-image:url("http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg");
    background-position: top;
    color:#FFF;
}
.topList a {
    text-decoration:none;
    color: #000;
}

查看全部

0 采集收起来源：编程练习

2020-01-20

慕粉15051578254

<style type="text/css">

/*在此定义相应的类选择器，并根据要求设置相关CSS属性*/
.mainBox{
width:960px;
background-color:#CFF;
float:left;
}
.leftBox{
width:740px;
height:300px;
background-color:#C9F;
float:left;
}
.rightBox{
width:210px;
height:300px;
background-color:#FCF;
float:right;
}

</style>
</head>

<body>


<div class="mainBox">

<div class="leftBox"></div>
<div class="rightBox"></div>
</div>

</body>

查看全部

0 采集收起来源：编程练习
2019-11-05
苏衡biu

Myfocus教程的相关网址：http://demo.jb51.net/js/myfocus/tutorials.html

查看全部

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

离弦4036856

由于a标签属于内联元素，
无高度和宽度属性，
因此控制鼠标经过状态改变背景颜色时，
仅在有文字的地方显示背景颜色。
解决的办法是把a标签变为块级元素，
display:block

查看全部

0 采集收起来源：编程练习

2019-10-25

离弦4036856

错位
解决办法：.nav{}中加入 clear:both;
原理？？？

查看全部

1 采集收起来源：企业网站制作之导航部分制作（一）
2019-10-24
离弦4036856

两个盒子在一排？

查看全部

0 采集收起来源：盒子模型
2019-10-24
qq_慕婉清8065762

list-style-type可以设置列表项目符号为：none无项目符号，disc实心圆，circle空心圆，square实心方块等但是不可以设置图片为项目符号。

查看全部

0 采集收起来源：练习题
2019-10-22
雪穿庭树作飞花 06:10

clear规定元素的哪一侧不允许其他浮动元素

查看全部

0 采集收起来源：浮动 float
2019-10-08
慕设计4248035

(⊙o⊙)…

查看全部

0 采集收起来源：编程练习
2019-09-19
慕运维658241

<style type="text/css">

        /*在此定义相关CSS样式*/
        *{margin:0;padding:0;}
        .topList{
            padding:5px;
            width:300px;
            height:180px;
            border:1px solid #E8E8E8;
            margin:0 auto;
        }
        .topList li{
            list-style-type:none;
            margin-bottom:15px;

        }
        .topList .top em{
            vertical-align:middle;
            float:left;
            font-style:normal;
            width:20px;
            height:16px;
            text-align:center;
            color:#333;
            background-image:url(" http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg");
            background-repeat:no-repeat;
            background-position:0 0;
        }
        .topList li em{
            float:left;
            font-style:normal;
            width:20px;
            height:16px;
            text-align:center;
            color:#333;
            background-image:url(" http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg");
            background-repeat:no-repeat;
            background-position:0 -16px;
        }
        .topList li p a{

            text-decoration:none;
            color:black;
            font-size:12px;
        }
        .topList li p{
           line-height:16px;

        }





        </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-09-16
慕设计4248035

图片高为32px
background-position:宽高，
若只设置宽，则高为50%，
background-position:0 16px,使图片移动16px至白色图片完全显示

查看全部

0 采集收起来源：编程练习
2019-09-15
慕设计4248035

<!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">

.topList{width:300px; height:180px;border:1px solidd #E8E8E8;margin:auto;}
li{list-style-type:none;}
ul{padding:5px;}
em{width:20px;height:16px;text-align:center;font-style:normal;color:#333;background-image:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg);background-position:0 16px;float:left;}
.top em{background-image:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg);background-position:0 0;color:white;}
a{text-decoration:none;}
a:hover,a:active{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-09-15
慕设计4248035
<!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.1页面头部制作练习题</title>
<style type="text/css">
li{width:50px; height:30px; list-style-type:none; float:left; text-align:center;}
ul a{ color:black; text-decoration:none;}
a:hover,a:active{color:white;width:50px;height:30px;display:block;margin-top:-6px; line-height:30px; background: #BE3948;}/*margin-top使a块级元素的外边距基于li往上移6px，再用line-height使文本居中*/
</style>
</head>

<body>
<h3>课程难度</h3>

<ul>
<li><a href="#">全部</a></li>
<li><a href="#">初级</a></li>
<li><a href="#">中级</a></li>
<li><a href="#">高级</a></li>
</ul>

</body>
</html>
查看全部

1 采集收起来源：编程练习
2019-09-14
独进青楼 01:11

首页制作图

查看全部

0 采集收起来源：企业网站制作之首页布局分析
2019-09-09
独进青楼 07:51

和模型盒模型

查看全部

0 采集收起来源：盒子模型
2019-09-09
慕UI0546179
1. 不同浏览器上ul和body 默认是有margin的。需要首先设置ul的margin和padding都清空。
2. 因为topList设置的有高度180px，所以li的height设置是有规律计算的，设置34px肯定是会让整体高度超出topList的。
  正确的计算方法：
  单个li的height= （180px-li上下padding5px*12）/6=20px。
3. 由于em的高度是16px，em的字体又跟文字的字体大小一样，所以font-size肯定要小于16px，初步设定font-size为12px。
4. 设置em的时候设置背景图片的位置;
5. 只对p标记左浮动，会让p标记中的内容显示在em内容的前面。所以em也要设置float：left；
6. 特别注意：em是斜体的风格，设置padding的左右，是导致em与li的距离，并不会改变em背景图片上方的文字内居中。如果此时，直接对em设置text-align：center；em内部的文字默认显示在最右边。
  解决办法：font-style:normal;//把斜体风格改成正常的风格，再加上text-align:center;
  就能使得em内的文字居中显示了。
查看全部

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

*{margin:0;padding:0;}
.newsBox{
min-height:300px;
_height:300px;
width:800px;
padding:5px;
margin:0 auto;
}
.newsTitle{
font-size:24px;
text-align:center;
margin-bottom:10px;
}
.newsInfo{
color:#666;
text-align:center;
border-bottom:1px dotted #666;

}
.newsContent{
text-indent:2em;
line-height:25px;
padding:10px;
font-size:14px;
font-family:'微软雅黑';
}
.newsContent img{
margin:0 auto;
display:block;
}

查看全部

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

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

0/150

提交

取消

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

企业网站综合布局实战