css笔记--10

Xayda~

于 2023-08-03 00:38:04 发布

阅读量52

点赞数 1

文章标签：笔记

本文链接：https://blog.csdn.net/2303_78650625/article/details/132074054

版权

1.电影卡片的练习

HTML

1）创建一个外层容器

2）创建图片容器

3）创建内容区容器

4）创建评分容器

5）创建星星图标和wb图标

<body>
    <div class="outer">
        <div class="img-wrapper">
            <img src="./图片列表/u=3715204800,4027948962&fm=253&fmt=auto&app=138&f=JPEG.webp" alt="">
        </div>
        <div class="info">
            <h2 class="title">
                动画电影
            </h2>
            <h3 class="category">
                动画
            </h3>
            <p class="intro">
                这是一部迪士尼的动画电影！
            </p>
        </div>
        <div class="star-wrapper">
            <ul class="star">
                <li class="fas fa-star light"></li>
                <li class="fas fa-star light"></li>
                <li class="fas fa-star"></li>
                <li class="fas fa-star"></li>
            </ul>
            <span class="fab fa-weibo"></span>
        </div>
    </div>
</body>

CSS

1）设置外层容器：宽度、设置外边距居中、设置阴影

2）设置图片：宽度、对齐方式

3）设置标题：颜色、文字大小、外边距

4）内容区：外边距

5）设置类别：颜色、字体大小

6）设置类别的图标：左外边距、右外边距

7）设置简介：字体大小、颜色（与类别的样式一致）、行间距、下外边距

8）设置下边的内容：高度、上边框、行间距使其居中

9）设置星星的样式：设置向左浮动

10）设置wb图标：设置向右浮动

11）设置星星和图标的颜色、外边距

<style>
    * {
        margin: 0;
        padding: 0;
    }
 
    .outer {
        width: 240px;
        margin: 100px auto;
        box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    }
 
    .img-wrapper img {
        width: 100%;
        vertical-align: bottom;
    }
 
    .info {
        padding: 0 18px;
    }
 
    .info .title {
        color: #717171;
        font-size: 18px;
        margin: 13px 0 15px 0;
    }
 
    .info .category {
        color: #acaaaa;
        font-size: 14px;
    }
 
    .info .category i {
        margin-left: 4px;
        margin-right: 7px;
    }
 
    .info .intro {
        color: #acaaaa;
        font-size: 14px;
        margin-left: 4px;
        margin-top: 18px;
        line-height:20px;
        margin-bottom: 18px;
    }
    .star-wrapper{
        height:46px;
        line-height: 46px;
        border-top:1px solid #e9e9e9;
        color:#ddd;
        padding:0 16px;
    }
    .star-wrapper .star{
        float:left;
    }
    .star-wrapper .light{
        color:#b9cb41;
    }
    .weibo{
        float:right;
    }
</style>

运行结果：

2.表格的简介

在网页中通过table标签来创建一个表格

1）在table中使用tr表示表格中的一行，有几个tr就有几行

2）在tr中使用td表示一个单元格，有几个td就有几个单元格

3) colspan横向合并单元格

<td colspan="2">c4</td>

4）rowspan纵向合并单元格

<td rowspan="2">c4</td>

3.长表格

可以将一个表格分成三个部分：

头部：thead

主题：tbody

底部：tfoot

th 表示头部的单元格：有加粗居中的效果

4.表格的样式

1）border-spacing ：指定边框之间的距离

2）border-collapse：设置边框的合并

3）如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中，tr不是tbody的子元素

4）默认情况下元素在td中是垂直居中的，可以通过vertical-align来设置

<style>
    table{
    width:50%;
    border:1px solid black;
margin:0 auto;
border-collapse: collapse;
}
td{
    border:1px solid black;
}
tbody>tr:nth-child(odd){
    background-color: #bfa;
}

将元素设置为单元格td

display:table-cell;

5.表单简介

表单：在现实生活中用于提交数据

在网页中也可以使用表单，网页中的表单用于将本地的数据提交给服务器

1）使用form变迁来创建一个表单

2）form的属性

action：表单要提交的服务器的地址

使用input标签

3）文本框，数据要提交到服务器中，必须要为元素指定一个name属性

<input type="text" name="username">

4）密码框

 <input type="password" name="password">

5）单选按钮，必须有相同的name属性

<input type="radio" name="a">
    <input type="radio" name="a">

6）多选框

<input type="checkbox" name="test" value="1">
    <input type="checkbox" name="test" value="2">
    <input type="checkbox" name="test" value="3">

7.下拉列表

<select name="haha">
        <option value="i">选项1</option>
        <option value="i">选项2</option>
        <option value="i">选项3</option>
    </select>

8）提交按钮

<input type="submit" value="注册">

6.表单补充

1）重置按钮reset

2）普通的按钮botton

<button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">按钮</button>

3）autocomplete用来设置开启或关闭自动补全

可选值：

off：关闭

on：开启

4）readonly将表单项设置为只读，数据会提交

5）disabled将表单设置为禁用，数据不会提交

6）autofocus：设置表单项自动获取焦点、

7.项目搭建

1）引入重置样式表

2）引入图标字体库

3）引入当前页面的样式表

4）引入公共样式表

.clearfix::before,
.clearfix::after{
    content:'';
    display:table;
    clear:both;
}
body{
    font:14px/1.5 Helvetica Neue;
    color:#333;
    min-width:1226px;
}
.w{
    width:1226px;
    margin:0 auto;
}

8.导航条结构的搭建

1）顶部导航条外部容器

2）创建内部容器

3）用ul和li标签创建左侧的导航条、购物车、用户登录注册信息

    <div class="topbar-wrapper">
        <div class="topbar">
            <ul class="server">
                <li><a href="javascript:;">小米商城</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">MIUI</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">loT</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">云服务</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">金融</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">有品</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">小爱开发平台</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">企业团购</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">资质证照</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">协议规则</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">下载app</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">Select Location</a></li>
            </ul>
            <ul class="shopcat">
                <li><a href="javascript:;">
                    <i class="fas fa-shopping-cart"></i>
                    购物车</a></li>
            </ul>
            <ul class="user-info">
                <li><a href="javascript:;">登录</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">注册</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">消息通知</a></li>
            </ul>
 
        </div>
    </div>

Xayda~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css笔记--10

在网页中通过table标签来创建一个表格1）在table中使用tr表示表格中的一行，有几个tr就有几行2）在tr中使用td表示一个单元格，有几个td就有几个单元格3) colspan横向合并单元格4）rowspan纵向合并单元格表单：在现实生活中用于提交数据在网页中也可以使用表单，网页中的表单用于将本地的数据提交给服务器1）使用form变迁来创建一个表单2）form的属性action：表单要提交的服务器的地址使用input标签。
复制链接

扫一扫