-
#引用评论
1、img本身就是一个元素,也就是传说中的盒子,它也是具有盒子的各种特性的;
2、img这个盒子是专门用来装图片的,它除了盒子的普通特性,还有一个特别的特性——使图片变得和它的大小一样,也可以说是变形;
3、如果你给加上别的盒子属性,也会生效的,比如内边距(padding)就是这样,除了内边距占据的空间,剩下的空间,还是会使图片变形的。总之,它会让图片充满它的内部空间。
查看全部 -
text-indent:200px 文本缩进
查看全部 -
网页换肤:相同的html结构,不同的css样式
查看全部 -
先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式。
查看全部 -
先确定结构,从结构上去考虑,通过样式去改变它的样子
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>智熄</title>
<style type="text/css">
body {margin:0;padding:0;}
.demo {width:600px;position:relative;overflow:hidden;}
.demo .left{width:100px;float:left;}
.demo .left img {margin-left:20px;}
.demo .right{width:448px;padding:20px;border:1px solid #ccc;background-color:blue;float:right;text-indent:2em;}
.demo .right span {position:absolute;top:5px;right:5px;}
/* 初级 */
.demo02 {width:600px;position:relative;overflow:hidden;margin-top:5px;}
.demo02 img {float:left;margin-left:20px;}
.demo02 .right{width:448px;padding:20px;border:1px solid #ccc;background-color:blue;float:right;text-indent:2em;}
.demo02 .right span {position:absolute;top:5px;right:5px;}
/* 中级 */
.demo03{width:448px;padding:20px;border:1px solid #ccc;background-color:blue;text-indent:2em;margin-left:110px;margin-top:5px;position:relative;}
.demo03 img{float:left;margin:-20px 0 0 -116px;}
.demo03 span{position:absolute;top:5px;right:5px;}
/* 高级 */
</style>
</head>
<body>
<div class="demo">
<div class="left">
<img src="C:/Users/Administrator/Desktop/案例04 微博对话框/images/head01.jpg"/>
</div>
<div class="right">
<h6>樱桃小丸子</h6>
<p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点,2005年4月正式批准运营的远程教育公共服务体系,为遍布全国的学员提供学历(专升本,高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
<span>10分钟前</span>
</div>
</div>
<!-- 。。。。。。。。。初级。。。。。。。。。。。 -->
<div class="demo02">
<img src="C:/Users/Administrator/Desktop/案例04 微博对话框/images/head01.jpg"/>
<div class="right">
<h6>樱桃小丸子</h6>
<p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点,2005年4月正式批准运营的远程教育公共服务体系,为遍布全国的学员提供学历(专升本,高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
<span>10分钟前</span>
</div>
</div>
<!-- 。。。。。。。。。中级。。。。。。。。。。。 -->
<div class="demo03">
<img src="C:/Users/Administrator/Desktop/案例04 微博对话框/images/head01.jpg"/>
<h6>樱桃小丸子</h6>
<p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点,2005年4月正式批准运营的远程教育公共服务体系,为遍布全国的学员提供学历(专升本,高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
<span>10分钟前</span>
</div>
<!-- 。。。。。。。。。高级。。。。。。。。。。。 -->
</body>
</html>
查看全部 -
在网页制作中,面对设计图,网页制作人员一般要遵循的原则是什么?
先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式。查看全部 -
三种思想
查看全部 -
text-indent文本缩进查看全部
-
把原本图片的盒子撑开使用内边距,box不再是图片的大小,从而能够显示出背景的图片,再将外部边距调整即可查看全部
-
思路!查看全部
-
text-indent:文本缩进,可用于文本定位查看全部
-
思路图查看全部
-
定位文本可用 :text-indent :文本缩进查看全部
-
网页换肤: 相同的html结构,不同的css样式。查看全部
举报