首页 > 其他分享 >前端必学-40个精选案例实战-案例7-仿爱奇艺视频首页新片预告实战

前端必学-40个精选案例实战-案例7-仿爱奇艺视频首页新片预告实战

时间：2024-02-21 14:44:23浏览次数：37  
标签：实战 width 必学 list height 案例 title margin left

仿爱奇艺视频首页新片预告实战案例

image.png

第一步：案例图片圆角制作、

图片资源：

img_01.png
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例图片圆角制作</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            /* a 标签取消下划线 */
            text-decoration: none;
        }
        
        body {
            background: #14161a;
        }
        
        .list_dl {
            width: 222px;
            height: 351px;
            border: 1px solid black;
        }
        
        .list_dl dt {
            width: 222px;
            height: 294px;
            float: left;
        }
        
        .list_dl dd {
            width: 222px;
            height: 57px;
            float: left;
            position: relative;
        }
        
        .list_dl dd .TextTitle {
            width: 222px;
            height: 16px;
            line-height: 16px;
            font-size: 16px;
            color: #f1f2f3;
            float: left;
            margin-top: 11px;
        }
        
        .list_dl dd .TextOuterTitle {
            width: 222px;
            height: 13px;
            line-height: 13px;
            font-size: 13px;
            color: #afaead;
            float: left;
            margin-top: 12px;
        }
        
        .list_dl dd .toLink {
            width: 51px;
            height: 23px;
            border: 1px solid #170011;
            background: #02cc54;
            position: absolute;
            right: 0;
            bottom: 0;
            text-align: center;
            line-height: 23px;
            font-size: 12px;
            color: #fff;
            border-radius: 3px;
        }
    </style>
</head>

<body>
    <div class="list_dl">
        <dt>
            <img src="img/img_01.png"/>
        </dt>
        <dd>
            <p class="TextTitle">慕课网学习的好地方</p>
            <p class="TextOuterTitle">2.0W人已预约</p>
            <a class='toLink' href="#">
                预约
            </a>
        </dd>
    </div>
</body>

</html>

理论实操：百分比样式如何设置

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百分比样式设置</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .one {
            width: 300px;
            height: 300px;
            background: black;
        }
        
        .two {
            width: 50%;
            height: 50%;
            background: red;
        }
        
        .three {
            width: 50%;
            height: 50%;
            background: green;
        }
        
        .next_one {
            width: 300px;
            height: 400px;
            margin: 0;
            background: black;
            position: absolute;
        }
        
        .next_two {
            width: 100px;
            height: 100px;
            background: red;
            margin-left: 50%;
        }
        
        .padding_one {
            width: 500px;
            padding: 200px;
            height: 300px;
            background: black;
        }
        
        .padding_two {
            float: left;
            padding-left: 10%;
            padding-top: 10%;
            background: red;
        }
        
        .position_one {
            width: 400px;
            height: 500px;
            background: black;
            position: relative;
        }
        
        .position_two {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 100%;
            top: 100%;
        }
    </style>
</head>

<body>
    <!-- width 和 height 属性会继承 -->
    <!-- <div class='one'>
        <div class='two'>
            <div class='three'></div>
        </div>
    </div> -->


    <!-- margin-left 50% 根据父级的width 来决定 -->
    <!-- <div class='next_one'>
        <div class='next_two'></div>
    </div> -->



    <!-- padding 也是根据父元素的宽来决定 -->
    <!-- <div class='padding_one'>
        <div class='padding_two'></div>
    </div> -->

    <!-- 定位也可以根据夫级的属性来进行操作 -->
    <div class="position_one">
        <div class='position_two'></div>
    </div>
</body>

</html>

图片圆角是如何被裁减的？

image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片圆角是如何被裁剪的</title>
    <style>
        .outer {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            /* 默认溢出状态 */
            /* overflow: visible; */
            /* 裁剪 */
            overflow: hidden;
        }
        
        .outer_two {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            overflow: auto;
        }
        
        .pic {
            width: 441px;
            height: 586px;
            border-radius: 9px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="outer">
        哈哈哈哈哈哈收快递啦啦合适的哈厉害的哈了还是带回来哈设定好啦好开森的哈说
    </div>
    <div class="outer_two">
        哈哈哈哈哈哈收快递啦啦合适的哈厉害的哈了还是带回来哈设定好啦好开森的哈说
    </div>
    <div class="pic">
        <img src="img/pic.png" />
    </div>
</body>

</html>

透明样式如何操作

image.png

图片资源：
pic.png

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            float: left;
            background: red;
            border: 5px solid black;
            position: relative;
            top: 120px;
            z-index: 1;
        }
        
        .opactiy {
            opacity: 0;
        }
        
        img {
            opacity: 0.3;
            position: relative;
            z-index: 2;
        }
    </style>
</head>

<body>
    <div class='opactiy'></div>
    <div></div>
    <img src="img/pic.png" />
</body>

</html>

第三步：首页新片预告实战案例

图片资源：
btn_icon_left.pngimg_01.pngimg_02.pngbtn_icon.png

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例图片圆角制作</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            /* a 标签取消下划线 */
            text-decoration: none;
        }
        
        body {
            background: #14161a;
        }
        
        .list_dl {
            width: 222px;
            height: 351px;
            float: left;
            margin-right: 14px;
        }
        
        .list_dl.end {
            margin-right: 0px;
        }
        
        .list_dl dt {
            width: 222px;
            height: 294px;
            float: left;
        }
        
        .list_dl dd {
            width: 222px;
            height: 57px;
            float: left;
            position: relative;
        }
        
        .list_dl dd .TextTitle {
            width: 222px;
            height: 16px;
            line-height: 16px;
            font-size: 16px;
            color: #f1f2f3;
            float: left;
            margin-top: 11px;
        }
        
        .list_dl dd .TextOuterTitle {
            width: 222px;
            height: 13px;
            line-height: 13px;
            font-size: 13px;
            color: #afaead;
            float: left;
            margin-top: 12px;
        }
        
        .list_dl dd .toLink {
            width: 51px;
            height: 23px;
            border: 1px solid #170011;
            background: #02cc54;
            position: absolute;
            right: 0;
            bottom: 0;
            text-align: center;
            line-height: 23px;
            font-size: 12px;
            color: #fff;
            border-radius: 3px;
        }
        /* 包裹最外层元素 */
        
        .outer {
            width: 1439px;
            height: 491px;
        }
        
        .outer .outer_title {
            width: 100%;
            height: 27px;
            margin-top: 30px;
            line-height: 27px;
            position: relative;
        }
        
        .outer .outer_title .title_text {
            float: left;
            color: #fff;
            margin-left: 19px;
            font-size: 27px;
        }
        
        .outer .outer_title .title_next_text {
            float: left;
            color: #fff;
            margin-left: 11px;
            font-size: 16px;
        }
        
        .outer .outer_title .right_btn {
            width: 54px;
            height: 22px;
            position: absolute;
            top: 0;
            right: 19px;
        }
        
        .outer .outer_title .right_btn .right_icon {
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
        }
        
        .outer .outer_title .right_btn .left_icon {
            position: absolute;
            left: 0;
            top: 0;
            cursor: pointer;
            opacity: 0.5;
        }
        /* list_title start */
        /*list_title start*/
        
        .list_title {
            width: 1402px;
            height: 25px;
            margin: 19px auto;
            border-bottom: 2px solid #212326;
        }
        
        .list_title .list_title_ul {
            float: left;
            width: 100%;
            height: 100%;
            list-style: none;
        }
        
        .list_title .list_title_ul .active {
            color: #71fa70;
        }
        
        .list_title .list_title_ul .active .circle {
            background: #5cc85d;
            border-color: #0a0010;
        }
        
        .list_title .list_title_ul li {
            float: left;
            width: 222px;
            height: 100%;
            margin-right: 14px;
            line-height: 16px;
            font-size: 16px;
            text-align: center;
            color: #aeafb0;
            position: relative;
        }
        
        .list_title .list_title_ul .end {
            margin-right: 0;
        }
        
        .list_title .list_title_ul li .circle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #303136;
            border: 1px solid #17191d;
            left: 50%;
            bottom: -6px;
            margin-left: -5px;
            border-radius: 50%;
        }
        /*title_card start*/
        
        .title_card {
            width: 1402px;
            height: 351px;
            margin: 22px auto;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="outer_title">
            <span class='title_text'>
                即将上线
            </span>
            <a href="#" class='title_next_text'>
                更多新片 >
            </a>
            <div class='right_btn'>
                <img class='left_icon' src="img/btn_icon_left.png" />
                <img class='right_icon' src="img/btn_icon.png" />
            </div>
        </div>


        <div class='list_title'>
            <ul class='list_title_ul'>
                <li class='active'>
                    今日16:00上线
                    <div class='circle'></div>
                </li>
                <li>
                    今日16:00上线
                    <div class='circle'></div>
                </li>
                <li>
                    今日16:00上线
                    <div class='circle'></div>
                </li>
                <li>
                    今日16:00上线
                    <div class='circle'></div>
                </li>
                <li>
                    即将上线
                    <div class='circle'></div>
                </li>
                <li class='end'>
                    今日16:00上线
                    <div class='circle'></div>
                </li>
            </ul>
        </div>

        <div class="title_card">
            <dl class='list_dl'>
                <dt>
                    <img src="img/img_01.png"/>
                </dt>
                <dd>
                    <p class='TextTitle'>
                        慕课网学习的好地方
                    </p>
                    <p class='TextOuterTitle'>
                        2.0人已预约
                    </p>
                    <a class='toLink' href="#">
                        预约
                    </a>
                </dd>
            </dl>
            <dl class='list_dl'>
                <dt>
                    <img src="img/img_02.png"/>
                </dt>
                <dd>
                    <p class='TextTitle'>
                        慕课网学习的好地方
                    </p>
                    <p class='TextOuterTitle'>
                        2.0人已预约
                    </p>
                    <a class='toLink' href="#">
                        预约
                    </a>
                </dd>
            </dl>
            <dl class='list_dl'>
                <dt>
                    <img src="img/img_01.png"/>
                </dt>
                <dd>
                    <p class='TextTitle'>
                        慕课网学习的好地方
                    </p>
                    <p class='TextOuterTitle'>
                        2.0人已预约
                    </p>
                    <a class='toLink' href="#">
                        预约
                    </a>
                </dd>
            </dl>
            <dl class='list_dl'>
                <dt>
                    <img src="img/img_01.png"/>
                </dt>
                <dd>
                    <p class='TextTitle'>
                        慕课网学习的好地方
                    </p>
                    <p class='TextOuterTitle'>
                        2.0人已预约
                    </p>
                    <a class='toLink' href="#">
                        预约
                    </a>
                </dd>
            </dl>
            <dl class='list_dl'>
                <dt>
                    <img src="img/img_01.png"/>
                </dt>
                <dd>
                    <p class='TextTitle'>
                        慕课网学习的好地方
                    </p>
                    <p class='TextOuterTitle'>
                        2.0人已预约
                    </p>
                    <a class='toLink' href="#">
                        预约
                    </a>
                </dd>
            </dl>
            <dl class='list_dl end'>
                <dt>
                    <img src="img/img_01.png"/>
                </dt>
                <dd>
                    <p class='TextTitle'>
                        慕课网学习的好地方
                    </p>
                    <p class='TextOuterTitle'>
                        2.0人已预约
                    </p>
                    <a class='toLink' href="#">
                        预约
                    </a>
                </dd>
            </dl>
        </div>
    </div>

</body>

</html>

图片下面的三像素的解决方式
image.png

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.outer{
				width: 300px;
				height: 500px;
				border: 10px solid black;
				text-align: center;
				
			}
			img{
				margin-top: 100px;
				position: relative;
				top: 5px;
			}
			.line{
				width: 100%;
				height: 20px;
				background: black;
				color: white;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class='outer'>
			<img src="img/1.jpeg" width="100"/>
			<div class='line'>
				123123123asdasdadasda
			</div>
		</div>
	</body>
</html>

图片默认会产生3px的距离，解决方式：font-size修改为0，或者采用定位(只能视觉修改)

标签：实战,width,必学,list,height,案例,title,margin,left
From： https://www.cnblogs.com/xiaochenNN/p/18025172

相关文章

  • ssts-hospital-web-master项目实战记录四：主要配置
    记录时间：2024-02-211.配置浏览器自动打开配置文件：package.json "scripts":{  "dev":"vite--open" } 2.配置src别名（1）安装@types/node输入npm命令npm i@types/node--save-dev（2）配置文件：vite.config.tsimport{defineConfig}from'vite&#......
  • python实战:用requests+json抓取接口
    一，安装requests1,用pip安装(venv)liuhongdi@192news%pip3installrequests2,查看所安装库的版本:(venv)liuhongdi@192news%pip3showrequestsName:requestsVersion:2.31.0Summary:PythonHTTPforHumans.Home-page:https://requests.readthedocs.ioAu......
  • ssts-hospital-web-master项目实战记录三：主要配置
    记录时间：2024-02-211.配置浏览器自动打开配置文件：package.json "scripts":{  "dev":"vite--open" } 2.配置src别名（1）安装@types/node输入npm命令npmi@types/node--save-dev（2）配置文件：vite.config.tsimport{defineConfig}from'vite&#......
  • ssts-hospital-web-master项目实战记录二：版本管理-git
    记录时间：2024-02-211.VSCode打开项目（1）文件→打开文件夹，对应的英文为File→OpenFolder（2）打开效果如下 2.VSCode本地项目托管 （1）打开终端：Terminal→NewTerminal（2）生成仓库：git init输入 git命令git init （3）添加到暂存区：git add.输入 git命令git add. （4）提......
  • ssts-hospital-web-master项目实战记录一：创建项目
    记录日期：2024-02-211.找到存放项目的文件夹，打开cmd命令 2.使用官方脚手架Vite创建项目（1）输入npm命令npmcreatevite@latest（2）输入项目名称：ssts-hospital-web-master （3）选择框架：Vue （4）选择变体（使用的编程语言）：TypeScript（5）构建完成，提示我们用三行命令进行接下来的操作，......
  • 两个死锁案例分析
    背景 死锁发生后，可以直接执行showengineinnodbstatus;查看最近的死锁日志。案例一：索引唯一键冲突导致的死锁，解决办法，在进行事务操作前先对数据进行一个排序，降低互相锁冲突的概率。 =====================================2024-02-1815:36:000x7f2146991700INNODB......
  • python实战:使用json序列化
    一，官方文档:https://docs.python.org/zh-cn/3/library/json.html二，json与字典的相互转化1,字典转json字符串1234567importjson #字典转jsond=dict(name='Tom',age=2,score=88)json_d=json.dumps(d)print(type(json_d))print(json_d)......
  • Diffusers实战
    Smiling&Weeping ----一生拥有自由和爱，是我全部的野心 1.环境准备 %pipinstalldiffusers fromhuggingface_hubimportnotebook_login#登录huggingfacenotebook_login()importnumpyasnpimporttorchimporttor......
  • Vector和deque小案例
    打分案例1.目的：5个学生，10个评委，10个评委的分数去掉最高和最低分，取平均分就是学生的分数2.思路：​ 1.抽象学生​ 2.使用vector容器存储学生​ 3.把分数放入deque容器，然后对deque容器进行排序，之后删除首尾元素3.流程：​ 1.创建学生​ 2.评委给学生打分​ 3.根据学生的分数排......
  • python实战:用requests+做爬虫
    一，安装requests1,用pip安装(venv)liuhongdi@192news%pip3installrequests2,查看所安装库的版本:(venv)liuhongdi@192news%pip3showrequestsName:requestsVersion:2.31.0Summary:PythonHTTPforHumans.Home-page:https://requests.readthedocs.ioAu......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99