Pictures and picture descriptions. The html file code is as follows:
& lt！ doctype？ html & gt
& lthtml？ lang = " zh " & gt
& lthead & gt
& ltmeta？ charset="utf-8 " >
& lttitle & gt pictures and picture descriptions
& lt link? href="20 130920img.css "？ rel="stylesheet " >
& lt/head & gt；
& ltbody & gt
& ltdl & gt
& lt Li>& ltp? class="marginright " >& ltimg？ class="img "？ src=" 1.jpg "？ Alt= "this is a picture about X 1" > 1
& lt Li>& ltp? class="marginright " >& ltimg？ class="img "？ src="2.jpg "？ Alt= "This is a picture about X2" > Picture 2
& lt Li>& ltp? class="marginright " >& ltimg？ class="img "？ src="3.jpg "？ Alt= "This is a picture about X3" > Picture 3
& lt Li>& ltp>& ltimg? class="img "？ src="4.jpg "？ Alt= "This is a picture about X4" > Picture 4
& lt Li>& ltp? class="marginright " >& ltimg？ class="img "？ src="5.jpg "？ Alt= "This is a picture about X5" > Picture 5
& lt Li>& ltp? class="marginright " >& ltimg？ class="img "？ src="6.jpg "？ Alt= "This is a picture about X6" > Picture 6
& lt Li>& ltp? class="marginright " >& ltimg？ class="img "？ src="7.jpg "？ Alt= "This is a picture about X7" > Picture 7
& lt Li>& ltp>& ltimg? class="img "？ src="8.jpg "？ Alt= "This is a picture about X8" > Picture 8
& lt/dl & gt；
& lt/body & gt；
& lt/html & gt； The img.css file code is as follows:
Body? {
Background:? # fff
Margin:? 0? Automatic;
}
dl？ {
Margin:? 0? 24px
Fill:? 10px；
Width:? 920px/* This is a key line that controls the total width of the list */
}
dl？ Lee? {
List style type:? None; /* Delete the dot before the list */
Show:? Embedded; /* This is a key line, making the list inline */
Floating:? Left; /* This is a key line that floats all inline list elements to the left */
}
dl？ Lee? p？ . img？ {
Width:? 200px？ /* This is a key line that controls the width of the picture */
Height:? 200px
Show:? Shielding; ? /* This is the critical line. Turn inline pictures into block-level box models */
Margins-bottom:? 5px？ /* Increase the bottom margin of 5px for the block-level box model picture */
}
dl？ Lee? p？ {
Text alignment:? Center; ? /* This is a key line with the control text centered */
}
dl？ Lee? p.marginright？ {
Right margin:? 40px/* This is a key line. Control 1? 2? 35? 6? 7 Width of the right margin of the picture */
Text alignment:? Center;
} the difficulty of your question is that HTML is
In CSS, we mainly solve three problems.
1. Control well
1. 1 & lt； dl/>； The distance between the left and right outer edges is 24px, the border defaults to 0, the inner margin is 10px, the width is 920px, and the total width is 988px；;
1.2 picture 1.234 each picture is 200px wide (200px high), including the picture1.23 < p/>; Each outer right side is 40px away, which is the first one? The total width of the rows is 920 pixels,
1.3 Picture 5 6 7 8 Each picture is 200 pixels wide (200 pixels high), including
2. Use display: embedded; Making < dl/> < Li/>; Become inline display, plus floating: left; all
3. Reuse display: block; Including "