CSS3 responsive tables and responsive Images

CSS3 responsive tables and responsive Images

Recently I followed a Daniel to learn CSS3. Below are two instance projects with Daniel. I have to say that CSS3 is really powerful. in addition, I recently set up a website with SAE, and put all the latest instances in it. After the website is set up and released, we can see the demonstration effect intuitively.

Create an HTML file CSDN courses

Course No.	Course name	Course operations
15004	Android development practices	Modify and delete
15005	IOS development practices	Modify and delete
15006	Java development practices	Modify and delete
15007	Ruby development practices	Modify and delete
15008	HTML development practices	Modify and delete

The effect is as follows:

Configure CSS3 styles

Body {margin: 0; padding: 0;}/* green #35B558 Orange # ff5c00 dark gray #666666 light gray # F8F8F8 **/h1 {text-align: center; font-size: 30px; color: #666 ;}. responsive a {text-decoration: none; padding: 5px; color: # ff5c00 ;}. responsive {width: 98%; margin: 0 auto; color: #000; border-collapse: collapse; border: 1px solid #666666; box-shadow: 0 0 0 1px rgba (0.4, 0 );}. responsive th {background-color: #35B558 ;}. responsive th ,. responsive td {border: 1px solid #666666; padding: 10px ;}. responsive. number ,. responsive. actions {text-align: center ;}

Effect:

Responsive Configuration

/* Responsive configuration */@ media (max-width: 480px) {/* remove the border and shadow */. responsive {border: none; box-shadow: none;}/* remove the header */. responsive thead {display: none;}/* set each item to block element distribution */. responsive tr ,. responsive td {display: block;}/* sets the distance between the number and name. Use the sub-Selector */. responsive td: nth-child (1 ),. responsive td: nth-child (2) {padding-left: 25%;}/* use a pseudo element to add a header */. responsive td: nth-child (1): before {content: "course No."; position: absolute; left :. 5em; font-weight: bold ;}. responsive td: nth-child (2): before {content: "Course name"; position: absolute; left :. 5em; font-weight: bold;}/* Add a box and a shadow to the header */. responsive tr {position: relative; border: 1px solid #666666; box-shadow: 0 0 0 3px rgba (, 0 ,. 4);}/* Add a background color to the header */. responsive. number {text-align: left; background-color: #35B558 ;}. responsive td. actions {position: absolute; right: 0; top: 0; border: none ;}}

Responsive Image Layout

This is very simple. Different images are displayed at different resolutions, so you can share the images directly without writing them.