程序博客网 > 淘宝助理批量修改图片

css学习初级入门

来源：互联网发布：淘宝助理批量修改图片编辑：程序博客网时间：2024/05/17 03:35

先体验下css的魅力，哈哈

一个简单的html：

<!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>无标题文档</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">页面层容器
　　<div id="Header">页面头部
<div id="menu">
　　　<ul>
　　　　<li><a href="#">首页</a></li>
　　　　<li class="menuDiv"></li>
　　　　<li><a href="#">博客</a></li>
　　　　<li class="menuDiv"></li>
　　　　<li><a href="#">设计</a></li>
　　　　<li class="menuDiv"></li>
　　　　<li><a href="#">相册</a></li>
　　　　<li class="menuDiv"></li>
　　　　<li><a href="#">论坛</a></li>
　　　　<li class="menuDiv"></li>
　　　　<li><a href="#">关于</a></li>
　　　</ul>
　　</div>
　　<div id="banner">
　　</div>
　　</div>
　　<div id="pagebody">
<div id="sidebar">侧边栏
</div>
<div id="mainbody">主体内容
</div>
</div>
<div id="Footer">页面底部
</div>
</div>
</body>
</html>

相关css.css文件：

/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}

/*页面层容器*/
#container {width:800px;margin:10px auto}

/*利用padding:20px 20px 0 0来固定菜单位置*/
#menu {padding:20px 20px 0 0}
/*添加了float:right使得菜单位于页面右侧*/
#menu ul {float:right;list-style:none;margin:0px;}
#menu ul li {float:left;margin:0 10px}
.menuDiv {width:1px;height:28px;background:#999}
#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
#menu ul li a:hover{}

#banner {
background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
width:730px; /*设定层的宽度*/
margin:auto; /*层居中*/
height:240px; /*设定高度*/
border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
clear:both /*清除浮动*/
}

#pagebody {
width:730px; /*设定宽度*/
margin:8px auto; /*居中*/
}
#sidebar {
width:160px; /*设定宽度*/
text-align:left; /*文字左对齐*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/

border:1px solid #E00;
height:200px
}
#mainbody {
width:570px;
text-align:left;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden

border:1px solid #F00;
height:200px
}

这里重点对css文件进行解释，

当在HTML中定义为id="divID"时，在CSS对应的设置语法则是#divID{} ，如果在HTML中定义为class="divID"时，则在CSS中对应的设置语法是.divID。
如果id="divID"这个层中包括了一个<img></img>，则这个img在CSS中对应的设置语法应该是#divID img {}，同样，如果是包含在class="divID"这个层中时，则设置语法应该是.divID img {}，这一点希望大家要分清楚了

对层的margin属性的左右边距设置为auto可以让层居中显示。

margin:0px；
　　也使用了缩写，完整的应该是：

　　margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
　　或
　　margin:0px 0px 0px 0px

　　顺序是上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；
以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，

　　另外还有以下几种写法：
　　margin:0px auto；
　　说明上下边距为0px，左右为自动调整；
　　我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，
　　只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。

淘宝助理批量修改图片

淘宝助理批量修改图片

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子电势能和电势重力势能公式弹性势能公式弹簧弹力势能公式电势和电势能电势与电势能的关系弹力势能的计算公式电势能的正负动能和势能机械能势能和动能的区别弹性势能与什么有关场强与电势能的关系电势能大小的判断弹性势能计算公式星际战甲静电势能发射器勃勃不久勃然大怒意思勃然大怒勃然变色勃然勃然奋励勃然大怒的解释勃然的意思勃然大怒的意思是什么勃然大怒的意思勃然大怒的近义词勃然大怒是什么意思勃肯鞋男性起勃出液体正常男人起勃角照片中国男性起勃直径图片男模起勃浴室男性起勃很容易出液体男性起勃像香蕉一样弯向下起勃有困难软的快男性起勃太久会痛插入图中国男性平均起勃长度2017 中国男性平均起勃长度中国男性平均起勃长度2018科学