前端学习-第一阶段-day04

最新推荐文章于 2024-07-18 18:41:00 发布
最新推荐文章于 2024-07-18 18:41:00 发布
阅读量109 收藏
点赞数
分类专栏： 前端学习日记 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34723035/article/details/109828326
版权

第四天练习

第一个练习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            margin: 40px auto;
            width: 850px;
            height: 600px;
            background-color: #ddd;

        }
        .box1{
            width: 270px;
            height: 270px;
            background:url(./img/作业1.png)  no-repeat white;
            display: inline-block;
            margin-bottom: 20px;
            margin-right: 10px;
        }
        .box2{
            padding-left: 10px;
            padding-right: 10px;
            margin-top: 220px;
            text-align: center;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">
            <div class="box2"><p>巴黎纽约伦敦罗马 这款单品把全球最美夜景搬进你家</p></div>
        </div>
        <div class="box1">
            <div class="box2"><p>巴黎纽约伦敦罗马 这款单品把全球最美夜景搬进你家</p></div>
        </div>
        <div class="box1">
            <div class="box2"><p>巴黎纽约伦敦罗马 这款单品把全球最美夜景搬进你家</p></div>
        </div>
        <div class="box1">
            <div class="box2"><p>巴黎纽约伦敦罗马 这款单品把全球最美夜景搬进你家</p></div>
        </div>
        <div class="box1">
            <div class="box2"><p>巴黎纽约伦敦罗马 这款单品把全球最美夜景搬进你家</p></div>
        </div>
        <div class="box1">
            <div class="box2"><p>巴黎纽约伦敦罗马 这款单品把全球最美夜景搬进你家</p></div>
        </div>
        
    
    </div>
    <br><br><br><br><br><br><br><br><br><br>
</body>
</html>

第二个练习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 660px;
            height: 300px;
            /* border: 1px black solid; */
            margin: 50px auto;
            overflow: hidden;
        }
        .title-box{
            width: 660px;
            border-bottom: 2px #2ebdd1 solid;
            padding-bottom: 5px;
            margin-bottom: 8px;
        }
        .title1{
            color:#4bc6d7 ;
            margin-right: 10px;
        }
        .title2{
            font-size: 8px;
            color: #999999;
        }
        .title{
            background-color: #3bb0d0;
            display: inline-block;
            padding: 5px;
            color:white;  
            font-size: 12px;        
        }
        .middle-title{
            color: rgba(0, 0, 0, 0.596);
            background-color: transparent;
        }
        .right-title{
            margin-left:372px;
        }
        .pic{
            width: 120px;
            height: 230px;
            margin-top: 10px;
            margin-right: 10px;
            background: url(./img/作业2-1.png);
            display: inline-block;
        }
        .pic2{
            width: 165px;
            height: 230px;
            margin-top: 10px;
            margin-right: 10px;
            background: url(./img/作业2-2.png);
            
        }
        .pic3{
            width: 165px;
            height: 230px;
            margin-top: 10px;
            margin-right:0px;
            background: url(./img/作业2-2.png);
            
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="title-box">
            <span class="title1">骆驼书</span>
            <span class="title2">读骆驼书，行万里路</span>
        </div>             
        <span class="title ">专题</span>
        <span class="title middle-title">专题</span>
        <span class="title middle-title">专题</span>
        <span class="title middle-title">专题</span>
        <span class="title middle-title">专题</span>
        <span class="title middle-title right-title">更多&gt;</span>
        <div>
            <div class="pic pic1"></div>
            <div class="pic pic2"></div>
            <div class="pic pic2"></div>
            <div class="pic pic3"></div>
        </div>
    </div>
</body>
</html>

第三个练习

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 629px;
            height: 190px;
            padding: 5px 10px 5px 0;
            /* border: 1px black solid; */
            margin: 50px auto;
        }

        .title-box {
            margin-bottom: 5px;
        }

        .title1 {
            font-size: 14px;
            color: #8a8a8a;
        }

        .title2 {
            font-size: 10px;
            margin-left: 10px;
            color: #8a8a8a;
        }

        .title3 {
            font-size: 14px;
            color: orange;
            float: right;
        }

        .pic-box {
            height: 125px;
            background-color: #e6dac5;
        }

        .pic-pic0 {
            width: 120px;
            height: 106px;
            /* border: 1px black solid; */
            padding-top: 15px;
            overflow: hidden;
            display: inline-block;
        }

        .pic-box1 {

            width: 80px;
            height: 80px;
            margin: 0 auto;
            background-image: url(./img/作业3.png);
            text-align: center;
            
        }

        .font-1 {
            
            text-align: center;
            width: 120px;
            font-size: 12px;
            color: #8a8a8a;
        }
        .left-pic{
            margin-left: -40px;
        }
        .bottom-font{
            margin: 10px auto;
            width: 80px;
            height: 25px;
            background-color: yellow;
            border-radius: 25px;
            font-size: 14px;
            text-align: center;
            line-height: 25px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="title-box">
            <span class="title1">每月抽奖&nbsp;年费专享</span>
            <span class="title2">年费会员每月免费抽大奖</span>
            <span class="title3">抽奖规则|我获得的礼品</span>
        </div>
        <div class="pic-box">
            <div class="pic-pic0">
                <div class="pic-box1"></div>
                <div class="font-1">店小二充电宝</div>
            </div>
            <div class="pic-pic0 left-pic">
                <div class="pic-box1"></div>
                <div class="font-1">店小二充电宝</div>
            </div>
            <div class="pic-pic0 left-pic">
                <div class="pic-box1"></div>
                <div class="font-1">店小二充电宝</div>
            </div>
            <div class="pic-pic0 left-pic">
                <div class="pic-box1"></div>
                <div class="font-1">店小二充电宝</div>
            </div>
            <div class="pic-pic0 left-pic">
                <div class="pic-box1"></div>
                <div class="font-1">店小二充电宝</div>
            </div>
            <div class="pic-pic0 left-pic">
                <div class="pic-box1"></div>
                <div class="font-1">店小二充电宝</div>
            </div>
            <div class="pic-pic0 left-pic">
                <div class="pic-box1"></div>
                <div class="font-1">店小二充电宝</div>
            </div>

        </div>
        
            <div class="bottom-font">立即抽奖</div>
        
    </div>
</body>

</html>

第四个练习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 600px;
            height: 80px;
            background-color: #242424;  
            margin: 40px auto; 
            overflow: hidden;
            border-bottom: 1px red solid;       
        }
        a {
            text-decoration:none;
            
        }
        .case{
            display: inline-block;
            width: 90px;
            height: 80px;
            /* border: 1px red solid; */
            color: rgb(180, 180, 180);
            text-align: center;
            line-height: 80px;
            margin-left: -5px;
        }
        .case-a{       
            background-color: #000000;
        }
        .case:hover{
            background-color: #000000;
        }
        .border-triangle{
            margin-top: -9px;
            margin-left: 39px;
            width: 0;
            height: 0;
            border-left:10px transparent solid;
            border-right: 10px transparent solid;     
            border-bottom: 10px rgb(255, 0, 0) solid;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="">
            <div class="case case-a">发现音乐
                <div class="border-triangle"></div>
            </div>
        </a>
        <a href="">
            <div class="case">我的音乐</div>
        </a>
        <a href="">
            <div class="case">朋友</div>
        </a>
        <a href="">
            <div class="case">商城</div>
        </a>
        <a href="">
            <div class="case">音乐人</div>
        </a>
        <a href="">
            <div class="case">下载客户端</div>
        </a>
    </div>
</body>
</html>
澜痕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
day01-day04.zip
09-05
从提供的文件信息来看，我们关注的是一个名为"day01-day04.zip"的压缩包，它可能包含了一个为期四天的学习教程或者项目实战内容，特别是侧重于“框架实战”的第四阶段。由于标签为空，我们无法获取额外的分类信息，...
第一阶段以后会持续更新到第一阶段结束.rar
01-31
在"第一阶段day1"和"day2"中，通常day1可能重点介绍了计算机基础和一种编程语言的入门，而day2可能进一步深入到数据结构或算法的初步学习，或者引入了数据库和前端开发的基础知识。这种分阶段的学习方式有助于逐步...
前端学习-第二阶段-day04
qq_34723035的博客
12-20 105
练习目标 ：写个好友列表，可以自动添加新的分类类型，自动往分类类型里添加分类子项 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
前端学习-第一阶段-day11
qq_34723035的博客
11-30 125
今日练习 练习图片 练习代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="styleshee
前端学习-第一阶段-day02
qq_34723035的博客
11-17 159
前端学习-第一阶段-day02 一.学习内容 1.超链接的使用： csdn首页 <a href="https://www.csdn.net/">csdn首页</a> 2.锚点的使用(快速跳转页面到锚点设置位置) 要配合id的使用,引用id前要加#键 <a href="#box">点我跳转到box</a> <div id="box"></div> 3.列表系列 有无序列表 （可用ul>li*n快捷设置多行） <ul typ
前端学习-第一阶段-day13
qq_34723035的博客
12-04 68
练习图片 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
day12_javaweb_javascript_day12-xml_energy7fo_
10-03
【标题】"day12_javaweb_javascript_day12-xml_energy7fo_" 提供的资源包主要涵盖了JavaWeb开发中的JavaScript和XML技术，是作者个人学习过程中的一个阶段性的总结，虽然标注为“day2”，但可以推测整个系列应该包含...
Day-23:第 23 天
06-25
在JavaScript编程语言的世界里，每一天的学习都是一个崭新的旅程，特别是在深入探究技术的第23天。在这个阶段，我们可能已经掌握了基础语法，现在是时候更深入地了解JavaScript的高级特性，以及如何在实际项目中应用...
Day-7:工作第 7 天
07-01
"Day-7:工作第 7 天"这个标题可能代表一个学习或工作计划的第七天，重点是深入理解和应用JavaScript。描述中的“工作第 7 天”暗示我们可能在这一阶段已经对JavaScript的基础有所了解，现在正进入更深入的学习或项目...
使用ant+jmeter如何生成html报告
2301_78276982的博客
07-16 1101
下载apache-ant，放到对应路径下，然后进行环境变量配置。系统变量的CLASSPATH添加E:\Installation Pack\eclipse\apache-ant-1.9.6\lib;用户变量的PATH添加：E:\Installation Pack\eclipse\apache-ant-1.9.6\bin。打开cmd，执行 ant，提示"Buildfile:build.xml does not exist!Build failed"则配置成功，ant命令可用。如下图所示。
Html_Css问答集(12)
白话魔法师
07-16 827
html与css学习中的一些疑问，问答中轻松获取知识。
Html_Css问答集(11)
白话魔法师
07-16 834
html与css学习中的一些疑问，问答中轻松获取知识。
PhantomJs将html生成img|pdf
u014614478的博客
07-16 884
PhantomJS 生成图片，pdf，爬虫等功能
「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中（三）
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
07-16 899
本文主要介绍如何用DHTMLX Gantt将上下文菜单集成到JavaScript Gantt图中，欢迎下载最新版组件体验！
【Godot4.2】MLTag类：HTML、XML通用标签类
巽的博客
07-16 1045
HTML和XML采用类似的标签形式。之前在Godot中以函数库形式实现了网页标签和内容生成。能用，但是缺点也很明显。函数之间没有从属关系，但是多有依赖，而且没有划分出各种对象和类型。如果以完全的面向对象形式来设计标签类或者元素类，将可以更贴近HTML或XML的本来面目。也更容易生成。整体思路是设计如下的类继承结构：实现之后，将可以充分的定义和生成HTML、XML和SVG标签，并用于内容生成或文档解析。纯面向对象的设计，尤其是基于继承的多个类组成的体系在某些方面还是很有用的。
html（抽奖设计）
2301_81704123的博客
07-13 537
可以根据自己的喜好设计抽奖内容，或者修改颜色。
HTML的简单应用 标记信件
Wzh20060111的博客
07-17 297
前言：暑假开始了，我也要正式开始学习web的相关知识了，先从三大件的html开始吧，目前只简单了解了html相关知识的基础，能写一些包含一些文字和图片的简单网页，其实会的东西还是不多，这边看书时发现书上有这样一个练习，就自己做了一下，也发现了自己这段时间学习的不足，只学不去用的话自己其实很难掌握这些知识，后面的学习我可能会看一些网课，做一点小项目来接着巩固自己的所学。正文：要求：
html+canvas 实现签名功能-手机触摸
最新发布
darling331的博客
07-18 324
手机上的效果图 需要注意，手机触摸和鼠标不是一个事件，不能通用，上一篇是关于使用鼠标的样例 相关代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...
day--和--day区别
04-18
1. "day--"是一个后缀自减操作符，用于将变量的值减1，并返回减1之前的值。例如，如果有一个变量day的值为5，执行day--操作后，day的值将变为4，并且表达式的结果为5。这个操作符通常用于循环或迭代中，用于递减...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值