找回密码
当前位置：前端开发者 > CSS > 正文

Web前端开发CSS分类

2018-10-04 分类：CSS 阅读(820) 评论(0)

前端开发工程师职能 前端开发工程师学什么 高端web前端开发工程师是什么

1、带标题的图像浮动于右侧
代码片段 1

<head>
    <style type=”text/css”>
        div {
            float: right;
            width: 120px;
            margin: 0 0 15px 20px;
            padding: 15px;
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <img src=”/i/eg_cute.gif” />
        css is fun!
    </div>
    <p>
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>
    <p>
        在上面的段落中，div 元素的宽度是 120 像素，它其中包含图像。div 元素浮动到右侧。我们向 div 元素添加了外边距，这样就可以把 div 推离文本。同时，我们还向 div 添加了边框和内边距。
    </p>
</body>
</html>

2、使段落的首字母浮动于左侧
代码片段 2

<html>
<head>
    <style type=”text/css”>
        span {
            float: left;
            width: 0.7em;
            font-size: 400%;
            font-family: algerian, courier;
            line-height: 80%;
        }
    </style>
</head>
<body>
    <p>
        <span>T</span>his is some text.
        This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text.
    </p>
    <p>
        在上面的段落中，文本的第一个字母包含在一个 span 元素中。这个 span 元素的宽度是当前字体尺寸的 0.7 倍。span 元素的字体尺寸是 400%，行高是 80%。span 中的字母字体是 “Algerian”
    </p>
</body>
</html>

3、创建水平菜单
代码片段 3

<html>
<head>
    <style type=”text/css”>
        ul {
            float: left;
            width: 100%;
            padding: 0;
            margin: 0;
            list-style-type: none;
        }
        a {
            float: left;
            width: 7em;
            text-decoration: none;
            color: white;
            background-color: purple;
            padding: 0.2em 0.6em;
            border-right: 1px solid white;
        }
        a:hover {
            background-color: #ff3300
        }
        li {
            display: inline
        }
    </style>
</head>
<body>
    <ul>
        <li><a href=”#”>Link one</a></li>
        <li><a href=”#”>Link two</a></li>
        <li><a href=”#”>Link three</a></li>
        <li><a href=”#”>Link four</a></li>
    </ul>
    <p>
        在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7
        倍）。我们添加了颜色和边框，以使其更漂亮。
    </p>
</body>
</html>

前端与后端开发工程师 前端开发工程师就业机会 前端开发者跟工程师的差别

赞(0)
前端开发者 » Web前端开发CSS分类
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论