Web page layout issues in HTML and CSS_html/css_WEB-ITnose-HTML Tutorial-php.cn

Web page layout issues in HTML and CSS_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:50:00

Original

1061 people have browsed it

To write an HTML page with 6

, use CSS to implement the layout of the

elements. The format is as follows:

Then in CSS How should I write it? ? Ask for expert advice

Reply to the discussion (solution)

<div class="d1"></div><div class="dc"><div class="d2"></div><div class="d3"></div></div><div class="dc"><div class="d4"></div><div class="d5"></div></div><div class="d6"></div><style>  *{margin:0px;padding:0px;}  div{border:5px solid #000;margin-top:10px;}  .dc{border:none;}  .d1,.d6{width:500px;height:80px;}  .dc div{float:left;width:200px;height:100px;}  .d3,.d5{margin-left:90px;}  .dc:after{display: block;content: '';clear: both;visibility: hidden; }</style>

Copy after login

After testing, under IE7, the code above Displayed as shown

Modify as follows:

<html><head>	<style>	  *{margin:0px;padding:0px;}	  div{border:5px solid #000;margin-top:10px;}	  .dc{border:none;width:600px;}	  .d1,.d6{width:500px;height:50px;}	  .dc div{float:left;width:200px;height:100px;}	  .d3{margin-left:90px;}	  .dc .d4,.dc .d5{width:220px;}	  .d5{margin-left:50px;}	  .dc:after{display: block;content: '';clear: both;visibility: hidden; }	</style></head><body><div class="d1">div_01</div><div class="dc">	<div class="d2">div_02</div>	<div class="d3">div_03</div></div><div class="dc">	<div class="d4">div_04</div>	<div class="d5">div_05</div></div><div class="d6">div_06</div></body></html>

Copy after login

This is very simple, right

Related labels：

HTML、CSS中的网页页面布局问题

source：php.cn

Previous article：A piece of code to clarify the difference between CSS attributes display and visibility_html/css_WEB-ITnose Next article：How to display different pictures according to different screen resolutions? _html/css_WEB-ITnose

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn