为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/HTML/CSS

/网页简单布局之结构与表现原则

我的定位好像也没有效果，求解

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Document</title>

<style>

body,p,h1,h2,h3,h4,h5,h6,form,ul,ol,hr{margin: 0;padding: 0;font:14px/1.5,normal,"Arial","sans-serif","微软雅黑","宋体"，"Tahoma";color:#666}

ul,ol{

list-style: none

}

.demo01{width: 600px;position: relative}

.demo01 .left{width:100px;float:left}

.demo01 .left.img{margin-left: 20px}

.demo01 .right{width: 445px;padding:20px;float: right;background: #9cf;border:1px solid #ccc}

.demo01 .right p{font-size: 12px;line-height: 25px;}

.demo01 span{position: absolute;right: 20px;top: 10px;font-size: 12px;}

</style>

</head>

<body>

<div>

   <div>

      <img src="images/1.png"/>

   </div>

   <div>

   <h6>樱桃小丸子</h6>

   <p>HTML5是未来10年引领Web持续发展的核心标准。强大的HTML5，不仅可以用来开发传统网页，还可以用来开发运行在iOS、Android设备 上的应用，更可以用来开发Web游戏。

        即将拉开帷幕的“HTML5校园行”，由360浏览器联合W3C中国（万维网联盟组织）共同举办，旨在通过本次活动，让广大在校同学了解支撑行业现状及引领未来趋势的最前沿的技术，基于前瞻性眼光，提前做好知识和技能储备，得以紧跟时代潮流，把握就业先机！</p>

        <span>10分钟之前</span>

   </div>

 </div>

</body>

</html>

http://img1.sycdn.imooc.com//59855b380001f12607160443.jpg

00:09
cym01494

2017-08-05

源自：网页简单布局之结构与表现原则  2-1

关注问题 我要回答
1446
操作
收起

正在回答

6 回答

cym01494 提问者
2017-08-09

demon1有问题

http://img1.sycdn.imooc.com//598ad6290001976d07230305.jpg

http://img1.sycdn.imooc.com//598ad6290001f03f13590593.jpg


0 回复 有任何疑惑可以回复我~
收起回答
qq_杂么说你不懂_0
2017-08-08

结构中div的class没写上doma

1 回复 有任何疑惑可以回复我~
收起回答
cym01494 提问者
2017-08-05

求评价，代码不能运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Document</title>

<style>

body,p,h1,h2,h3,h4,h5,h6,form,ul,ol,hr{margin: 0;padding: 0;font:14px/1.5,normal,"Arial","sans-serif","微软雅黑","宋体"，"Tahoma";color:#666}

ul,ol{

list-style: none

}

.demo01{width: 600px;position: relative}

.demo01 .left{width:100px;float:left}

.demo01 .left img{margin-left: 20px}

.demo01 .right{width: 345px;padding:20px;float: right;background: #9cf;border:1px solid #ccc}

.demo01 .right p{font-size: 12px;line-height: 25px;}

.demo01 span{position: absolute;right: 20px;top: 10px;font-size: 12px;}


.demo02{width: 600px;position: relative;overflow: hidden;}

.demo02  img{float: left;margin-top: 20px}

.demo02 .right{width: 345px;padding:20px;margin-top:20px;float: right;background: #9cf;border:1px solid #ccc}

.demo02 .right p{font-size: 12px;line-height: 25px;}

.demo02 span{position: absolute;right: 20px;top: 10px;font-size: 12px;margin-top:20px;}


    .demo03 {width: 345px;padding:20px;margin-top:20px;background: #9cf;border:1px solid #ccc;margin-left: 213px;position: relative}

    .demo03 img{float: left;margin-top: 20px;margin-left: -224px}

    .demo03 .right p{font-size: 12px;line-height: 25px;}

.

.demo03 span{position: absolute;right: 20px;top: 10px;font-size: 12px;}


</head>

<body>

<div>

   <div>

      <img src="images/1.png"/>

   </div>

   <div>

   <h6>樱桃小丸子</h6>

   <p>HTML5是未来10年引领Web持续发展的核心标准。强大的HTML5，不仅可以用来开发传统网页，还可以用来开发运行在iOS、Android设备 上的应用，更可以用来开发Web游戏。

        即将拉开帷幕的“HTML5校园行”，由360浏览器联合W3C中国（万维网联盟组织）共同举办，旨在通过本次活动，让广大在校同学了解支撑行业现状及引领未来趋势的最前沿的技术，基于前瞻性眼光，提前做好知识和技能储备，得以紧跟时代潮流，把握就业先机！</p>

        <span>10分钟之前</span>

   </div>

 </div>






 <div>

   

      <img src="images/1.png"/>

  

   <div>

   <h6>樱桃小丸子</h6>

   <p>HTML5是未来10年引领Web持续发展的核心标准。强大的HTML5，不仅可以用来开发传统网页，还可以用来开发运行在iOS、Android设备 上的应用，更可以用来开发Web游戏。

        即将拉开帷幕的“HTML5校园行”，由360浏览器联合W3C中国（万维网联盟组织）共同举办，旨在通过本次活动，让广大在校同学了解支撑行业现状及引领未来趋势的最前沿的技术，基于前瞻性眼光，提前做好知识和技能储备，得以紧跟时代潮流，把握就业先机！</p>

        <span>10分钟之前</span>

   </div>

 </div>



 <div>

   

      <img src="images/1.png"/>

  

   

   <h6>樱桃小丸子</h6>

   <p>HTML5是未来10年引领Web持续发展的核心标准。强大的HTML5，不仅可以用来开发传统网页，还可以用来开发运行在iOS、Android设备 上的应用，更可以用来开发Web游戏。

        即将拉开帷幕的“HTML5校园行”，由360浏览器联合W3C中国（万维网联盟组织）共同举办，旨在通过本次活动，让广大在校同学了解支撑行业现状及引领未来趋势的最前沿的技术，基于前瞻性眼光，提前做好知识和技能储备，得以紧跟时代潮流，把握就业先机！</p>

        <span>10分钟之前</span>

  

 </div>






</body>

</html>


0 回复 有任何疑惑可以回复我~
收起回答
cym01494 提问者
2017-08-05

不过怎么把右边文本div宽度变宽点

0 回复 有任何疑惑可以回复我~
收起回答
cym01494 提问者
2017-08-05

http://img1.sycdn.imooc.com//59855e370001d6cc07910388.jpg结果图

0 回复 有任何疑惑可以回复我~
收起回答
cym01494 提问者
2017-08-05

我的图片宽202px，前面设置demo01宽600px,所以

.demo01 .right{width: 368px;padding:20px;float: right;background: #9cf;border:1px solid #ccc}

0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
网页简单布局之结构与表现原则
  • 参与学习       108319    人
  • 解答问题       375    个

入门必杀技之结构与表现相分离，课程会有3个案例，不同角度讲解

进入课程

我的定位好像也没有效果，求解

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信