“花瓣网”首页静态页面(仅供参考)

最新推荐文章于 2024-05-03 14:55:36 发布
VIP文章 最新推荐文章于 2024-05-03 14:55:36 发布
阅读量862 收藏 2
点赞数 1
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ying_0608/article/details/109708895
版权

代码块：

<!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>
        * {
   
            margin: 0px;
            padding: 0px;
        }
        body {
   
            text-align: center;
        }

        .header_top {
   
            width: 100%;
            height: 50px;
            position: relative;
        }

        .d1 {
   
            margin-right: -50px;
        }

        .logo1 {
   
            display: inline-block;
            position: absolute;
            margin-left: -80px;
        }

        .logo1 img {
   
            width: 60px;
            height: 30px;
            margin-top: 10px;

        }

        a {
   
            position: relative;
            display: inline-block;
            height: 41px;
            padding: 0px 5px;
            font-size: 14px;
            text-decoration: none;
            color: #000;
            line-height: 50px;

        }

        .header_input {
   
            display: inline-block;
            margin-left: 50px;

        }

        input {
   
            width: 450px;
            height: 30px;
        }

        .login {
   
            height: 30px;
            width: 40px;
            margin-left: 30px;
            background-color: red;
            color: #fff;
        }

        .rigister {
   
            height: 30px;
            width: 40px;
            margin-left: 10px;
        }

        .box1 {
   
            padding-top: 100px;
            width: 100%;
            height: 250px;
            background-size: 100% 100%;
            background-image: url(images/11.jpg);
        }

        .box2 {
   
            position: relative;
            width: 345px;
            height: 100px;
            color: #fff;
            margin: 0px auto;
            position: relative;
            line-height: 40px;
        }

        .line-though {
   
            display: flex;
            flex-direction: row;
            color: #fff;
        }

        .line-though:before,

        .line-though:after {
   
            content: "";
            flex: 1 1;
            border-bottom: 2px solid #fff;
            margin: 20px;
        }

        .images {
   
            width: 345px;
            height: 40px;
            margin: 30px auto;</
最低0.47元/天 解锁文章
ying-0608
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
花瓣网源码
06-17
仿Pinterest源码（ThinkSNS内核
Python抓取花瓣网高清美图
diaozhu1028的博客
06-12 494
一：前言 嘀嘀嘀，上车请刷卡。昨天看到了不错的图片分享网——花瓣，里面的图片质量还不错，所以利用selenium+xpath我把它的妹子的栏目下爬取了下来，以图片栏目名称给文件夹命名分类保存到电脑中。这个妹子主页http://huaban.com/boards/favorite/beauty是动态加载的，如果想获取更多内容可以模拟下拉，这样就可以更多的图片资源。这种之前爬虫中也做过，...
【花瓣网】花瓣网练习-首页的静态页
aishenghuo___的博客
07-16 3807
<!-- 头部导航条 --> <div id="header_top"> <!-- 导航 --> <div id="header_top_left"> <!-- 顶部导航条 --> <div id="header_top_left_logo"> <img src="./images/logo_wt.svg" &
花瓣网知美网源码仿Pinterest源码
02-06
花瓣网知美网源码仿Pinterest源码ThinkSNS 2.3商业版
前端_花瓣网项目
qq_44808875的博客
03-21 1274
这里使用的工具是vscode 仿照的效果如图： 步骤如下： 第一步从静态页面开始: 静态页面制作步骤从上到下，一个模块一个模块开始 头部开始： 头部的静态HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>花瓣网</title> <link rel="stylesheet" href="css/inde
利用python网络爬虫批量下载花瓣中个人主页中收藏的所有图片
10-30
利用python网络爬虫批量下载花瓣中个人主页中收藏的所有图片，把用户名改成自己的，下载结果放在了likes文件夹中，已跑通。
ubuntu小技巧5——如何在桌面添加软件快捷方式，如何设置软件打开快捷键
ytusdc的博客
12-06 475
https://blog.csdn.net/u011127242/article/details/44885939
花瓣网html 静态项目可做HTML课程设计
05-23
HTML基础，不包含数据库，服务器，只是静态网页
高仿花瓣网源码 v5.1
12-07
高仿花瓣网源码是基于thinksns进行开发的分享类网站源码。 Pinterest是最火爆、最受关注的图片+兴趣分享类网站。Pinterest名称由Pin（图钉）+Interest（兴趣）组成，寓意为把自己感兴趣的东西(图片)用图钉钉在钉板...
2016花瓣官网首页模板
02-26
2016花瓣官网首页模板，网上收集的，仅仅用于学习
花瓣网布局demo.zip
12-30
花瓣网布局demo.zip
HTML5全屏花瓣动态特效
09-30
纯CSS3 HTML5全屏花瓣动态特效,无JS
scratches_goodqua_花瓣网爬虫_Grabuser_
09-29
通过跟踪所有的连接方式，我们可以很容易地下载到整个网站的页面。但是，这种方法会下载大量我们并不需要的网页。例如，我们想要从一个在线论坛中抓取用户帐号的详情页，那么此时我们只需要下载帐号页，而不需要下载...
仿花瓣网的图片瀑布流
11-22
仿花瓣网的图片以瀑布流效果展示。 效果案例：http://www.movie366.com/tuijian/today.html
有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）
秋刀鱼不做梦的编程日常
05-01 936
有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）
第二弹：走进CSS世界，学习记录
weixin_64638001的博客
04-29 814
当选择器包含多种选择器时，需要将多种选择器优先级相加然后进行比较。选择器的优先级不会超过它最大数量级，如果选择器优先级一样，则使用靠后的样式。子选择器：选择器1 > 选择器2 表示选择器1的子元素为选择器2(只有父子关系才可以)。相邻选择器：选择器1 + 选择器2 表示选择紧贴在选择器1之后的选择器2元素。兄弟选择器：选择器1 ~ 选择器2 表示选择器1后面的所有兄弟元素选择器2。包含选择器：选择器1 选择器2 表示选择器2被选择器1包含即可。组合选择器：选择器1,选择器2 多个选择器之间用逗号分隔。
CSS之显示覆盖内容（z-index）
qq_60624992的博客
04-27 804
我们有的时候，希望下方的内容能够显示到上方，达到类似于多个图层的效果，此时我们可以利用z-index这个属性。z-index属性值是用来设置元素的堆叠顺序(元素层级)。
CSS 伪类、伪元素的应用实例：电池充电、高能进度条
无解的菜鸟晖 的博客
04-30 963
本文通过 CSS 伪类、伪元素，结合动画 animation 和 Vue 动态样式属性（通过 CSS 变量）的写法，来实现电池充电、高能进度条的效果。 CSS 伪类是对当前元素下，处于某些特定状态时而添加特殊效果的样式（基于文档之外的抽象，所以叫伪类），不产生新元素，写法用单冒号（:）开头。 CSS 伪元素是对当前元素下，某些特殊部位应用样式，通过创建虚拟元素实现，一般与 content 属性一起使用（基于元素的抽象，所以叫伪元素），写法用双冒号（::）开头。CSS 变量 var() 用于插入自定义属性。
HTML_CSS学习：常用文本属性
最新发布
m0_74972727的博客
05-03 307
【代码】HTML_CSS学习：常用文本属性。
用canvas画静态花瓣
05-31
好的，以下是用canvas画静态花瓣的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas Flower Petals</title> <meta charset="utf-8"> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="flower" width="400" height="400"></canvas> <script> const canvas = document.getElementById('flower'); const context = canvas.getContext('2d'); // 花瓣颜色 const petalColor = '#FFC0CB'; // 绘制花瓣 function drawPetal(x, y, radius, angle) { context.beginPath(); context.moveTo(x, y); context.arc(x, y - radius / 2, radius / 2, angle, angle + Math.PI, false); context.arc(x, y + radius / 2, radius / 2, angle + Math.PI, angle + 2 * Math.PI, false); context.closePath(); context.fillStyle = petalColor; context.fill(); } // 绘制花朵 function drawFlower(x, y, radius, numPetals) { const angleIncrement = (2 * Math.PI) / numPetals; for (let i = 0; i < numPetals; i++) { drawPetal(x, y, radius, i * angleIncrement); } } // 绘制花朵 drawFlower(200, 200, 100, 8); </script> </body> </html> ``` 运行以上代码，即可在浏览器中看到一个有8朵花瓣的花。如果需要更多的花瓣，可以调整`numPetals`参数的值。如果需要改变花瓣颜色，可以修改`petalColor`变量的值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值