html+css 网站开发小细节

1.淘宝的导航栏居中

这里写图片描述

html:


<html>
<head>
    <title>title>
<link rel="stylesheet" href="1.css">
<style type="text/css">

style>
head>

<body>
    <div class="wrapper">
        <div class="content">
            <div class="right">
                <ul>
                    <li>首页li>
                    <li>我的淘宝li>
                    <li>聚划算li>
                ul>
            div>
            <div class="left">
                <ul>
                    <li>登陆li>
                    <li>注册li>
                ul>
            div>
        div>
    div>
body>
html>

css:

*{
    padding: 0;
    margin: 0;
}
.wrapper{
    height: 30px;
    background-color: #424242;

}
.content{
    height: 30px;
    width: 80%;
    background-color: #f40;
    margin: 0 auto;
}
.right{

    float: right;
}
.left{
    float: left;
    margin-left: 30px;
}
ul{
    list-style: none;
}
li{
    float: left;
    margin-right: 30px;
    line-height: 30px;
}

这里写图片描述

一个行级元素,一旦设置position:absolute; float:left/right; display属性值就会变成float。

2.条目布局

HTML:


<html>
<head>
    <title>title>
<link rel="stylesheet" href="1.css">
<style type="text/css">

style>
head>

<body>
    <div>
        我的微博
    div>
body>
html>

CSS:

*{
    padding: 0;
    margin: 0;
}
div{

    width: 300px;
    background-color: #424242;
    color: #fff;
    /*文字居中
        方法1:line-height=height;before和after的位置不会随div改变
        方法2:font-size=height ;再加上padding
    这里使用方法2,居中后,before和after会随着文字的位置移动,不用再单独调
    */
    padding: 10px 10px;
    height: 12px;
    line-height: 12px;
    font-size: 12px;

}
div::before{
    /*伪元素必须属性*/
    content: "";
    display: inline-block;

    margin-right: 10px;
    width: 15px;
    height: 12px;
    float: left;
    background-color: #f40;
}
div::after{
    content: "";
    display: inline-block;

    width: 15px;
    height: 12px;
    float: right;
    margin-right: 10px;
    background-color: #999;
}

这里写图片描述

3.小测试题

html+css 网站开发小细节_第1张图片
html:


<html>
<head>
    <title>title>
<link rel="stylesheet" href="1.css">
<style type="text/css">

style>
head>

<body>
    <div class="wrapper">
        <div class="content">
            <img class="img" src="1.jpeg">
            <p class="content1">最多两行20px #333, 

            顶部对齐图片,底部间距8pxp>
            <p class="content2">
                12px #666 行高1.2 ,使用语义化的HTML的标签完成以下布局,考虑模块化和扩展性,容器默认宽度320px,右侧。
            p>
        div>
    div>
body>
html>

css:

*{
    padding: 0;
    margin: 0;
}
.wrapper{
    width: 320px;
}
.wrapper:hover{
    width: 400px;
}

.wrapper .img{
    width: 100px;
    height: 100px;
    float: left;
}

.content1{
    font-size: 20px;
    color: #333;
    margin-bottom: 8px;
    height: 40px;
    line-height: 20px;
    overflow: hidden;
}
.content2{
    font-size: 12px;
    color: #666;
    line-height: 1.2em;

}

html+css 网站开发小细节_第2张图片

你可能感兴趣的:(html+css)