HTML与CSS实战-优快云博客

本文链接：https://blog.youkuaiyun.com/jokes000/article/details/8567296

Ordered Lists:

HTML：

<!DOCTYPE html>
<html>
	<head>
		<title>Lists</title>
	</head>
	<body>
		<h1>List of my favorite things</h1>
			<ol>
				<li>raindrops on roses</li>
				<li>whiskas on kittens</li>
				<li>call of duty: modern warfare</li>				
			</ol>
		
		
	</body>
</html>

效果：

粗体：

斜体：

表格：

HTML:

<html>
    <head>
        <title>Table Time</title>
    </head>
    
    <body>
        
        <table style="border-collapse:collapse;">
            <thead>
                <tr>
                    <th colspan="2" style="color:red">Famous Monsters by Birth Year</th>
                </tr>
                <tr style="border-bottom:1px solid black;">
                    <th style="padding:5px; color:red"><em>Famous Monster</em></th>
                    <th style="padding:5px;border-left:1px solid black;color:red"><em>Birth Year</em></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="padding:5px;">King Kong</td>
                    <td style="padding:5px;border-left:1px solid black;">1933</td>     
                </tr>
                
                <tr>
                    <td style="padding:5px;">Dracula</td>
                    <td style="padding:5px;border-left:1px solid black;">1897</td>
                </tr>
                
                <tr>
                    <td style="padding:5px;">Bride of Frankenstein</td>
                    <td style="padding:5px;border-left:1px solid black;">1944</td>
                </tr>
            </tbody>
        </table>
        
    </body>

</html>

效果图：

<a>标签：

CSS中<a>标签的text-decoration attributes可以将下划线去掉。

CSS的selectors：

see how the classes and IDs alter the way the paragraph looks? (Note how the li p { CSS overrides the p { CSS, and the .list_item overrides the li p { CSS.)

class: 为一类元素使用 .name

id: 为单独一个元素使用 #name

Pseudo-Class Selectors:

Links:

a:link : unvisited link

a:visited: a visited link

a:hover : a link that you are hovering your mouse over.

Child:

first-child: another useful pseudo-class selector is first-child. It's used to apply styling to only the elements that are the first children of their parents

nth-child:

Display(box model):

block: This makes the element a block box. It won't let anything sit next to it on the page! It takes up the full width

inline-block: this makes the element a block box, but will allow other elements to sit next to it on the same line

inline: this makes the lement sit on the same line as another element, but without formatting it like a block. It only takes up as much width as it needs

none: this makes the element and its content disappear from the page entirely.