Home > Developer > Web Develop
When there is one or more pictures on a webpage, and the size of these pictures is larger, in order to make the page layout more compact and reasonable, we can put these pictures in a picture library, can effectively prevent the image too large may affect the layout of the page.
With CSS we can do this, and here's a simple example:
Neymar door break Instant street dance Entertainment passion Mexico Messi free kick source code is:1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8"/>5 <style>6 div.img7 {8 margin:3px;9 Border:1px solid #bebebe;Ten Height:Auto; One width:Auto; A float: Left; - text-align:Center; - } the div.img img.img - { - Display:inline; - margin:3px; + Border:1px solid #bebebe; - } + div.img a.img:hover img.img A { at Border:1px solid #333333; - } - Div.desc - { - text-align:Center; - Font-weight:Normal; in width:150px; - font-size:12px; to margin:10px 5px 10px 5px; + } - </style> the </Head> * <Body> $ <Divclass= "img">Panax Notoginseng <aclass= "img"Target= "_blank"href=""> - <imgclass= "img"src= "http://c.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=7b09810d6d061d95794633384bc431a0/ Ca1349540923dd5484465f5dd209b3de9c8248ca.jpg "alt= "Ballade"width= " the"Height= " the"> the </a> + <Divclass= "desc">Neymar break the moment</Div> A </Div> the <Divclass= "img"> + <aclass= "img"Target= "_blank"href= "http://f.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=ccd964e98913632711edc633a1bf9b9d/ 6d81800a19d8bc3e6c33feff818ba61ea8d345c8.jpg "> - <imgclass= "img"src= "http://f.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=ccd964e98913632711edc633a1bf9b9d/ 6d81800a19d8bc3e6c33feff818ba61ea8d345c8.jpg "alt= "Ballade"width= " the"Height= " the"> $ </a> $ <Divclass= "desc">Street Dance Entertainment</Div> - </Div> - <Divclass= "img"> the <aclass= "img"Target= "_blank"href= "http://c.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=42b7c421a818972ba73a04cad6fd40f8/ 342ac65c1038534369537f149013b07eca808863.jpg "> - <imgclass= "img"src= "http://c.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=42b7c421a818972ba73a04cad6fd40f8/ 342ac65c1038534369537f149013b07eca808863.jpg "alt= "Ballade"width= " the"Height= " the">Wuyi </a> the <Divclass= "desc">Passion Mexico</Div> - </Div> Wu <Divclass= "img"> - <aclass= "img"Target= "_blank"href= "http://f.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=3ea85b2ed70735fa95f04ab9ae6134c2/ 11385343fbf2b21106a37c7bc98065380cd78e72.jpg "> About <imgclass= "img"src= "http://f.hiphotos.bdimg.com/album/s%3D1000%3Bq%3D90/sign=3ea85b2ed70735fa95f04ab9ae6134c2/ 11385343fbf2b21106a37c7bc98065380cd78e72.jpg "alt= "Ballade"width= " the"Height= " the"> $ </a> - <Divclass= "desc">Lionel Messi's free kick to</Div> - </Div> - </Body> A </HTML>
We can also adjust the transparency of the image through CSS.
These actions are done through the transparency properties of the CSS (opacity property).
CSS MediaCSS media is the definition of how the document is "displayed", the document can be "displayed" on the display, paper, audio and other media
different media types| media type | description |
|---|---|
| all | for all media devices. |
| for speech and audio synthesizers. | |
| braille | |
| embossed | Braille printer for pagination. |
| handheld | |
| for printers. | |
| projection | |
| screen | |
| tty | |
| tv |
Note: The media type name is not case sensitive.
The definition of a media type is implemented by using @media .
@media screen{P{font-family:verdana,sans-serif; font-size:14px}}{P{font-family:times,serif; font-size:10px}}@mediaprint{P{font-weight:bold}}@mediascreen,print
The above style is the content of the P element on the display (Font-family:verdana,sans-serif; font-size:14px) effect display, if printed to the paper the display effect is (FONT-FAMILY:TIMES,SERIF; font-size:10px), the display effect (Font-weight:bold) is bold in both the browser and the fonts printed onto the paper elements.
Some Considerations for CSSIn an HTML document, you should declare ! DOCTYPE, because some properties of CSS in the IE8 and the version, may not be able to hit the effect of overdue.
Avoid using the Behavior property as much as possible, because the behavior property is only supported in IE browsers and is not supported in other browsers. When you need to adapt to the behavior attribute, you should use JavaScript and HTML DOM instead.
Other places to be aware of, later encountered in making a summary.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
