HTML CSS样式初步运用-卖苹果手机页面（超级简易版）

最新推荐文章于 2025-03-26 16:02:47 发布
最新推荐文章于 2025-03-26 16:02:47 发布
阅读量379 收藏
点赞数 9
文章标签： html css 智能手机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2403_87749312/article/details/144492643
版权

CSS样式代码

目录

CSS样式代码

 HTML代码

/*整体区域*/
.goods-item:hover {

    border: solid 1px red;

}

/*相框区域*/
.xk {


    border-radius: 4px;
    /*圆角边框*/
    cursor: pointer;
    /*鼠标移动上去，显示手图案*/
}

/*图片区域*/
.img {
    width: 250px;
    height: 300px;
}

/*价格区域*/
.price {
    cursor: pointer;
    /*鼠标移动上去，显示手图案*/
    font-size: 30px;
    color: red;
    font-weight: bolder
}

.xiaoshu {
    cursor: pointer;
    /*鼠标移动上去，显示手图案*/
    font-size: 20px;
    color: red;
}

/*文案区域*/
.goods-title {
    color: dimgrey;
    font-size: 15px;

}

 HTML代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第7次课的作业 css练习</title>
    <link rel="stylesheet" href="CSS/goods.css">
</head>

<body>
    <table>
        <tr>
            <td>
                <div class="goods-item">
                    <div class="xk">
                        <img src="images/sj1.png" class="img" />
                    </div>
                    <p class="goods-title">
                        拍拍 苹果【12期免息】Apple iPhone16 苹果16Plus 全新未激活美版有锁手机 iPhone16 粉色 128GB【原版未激活+店保2年】
                    </p>
                    <div class="price">
                        499.<span class="xiaoshu">99</span>$
                    </div>

                </div>
            </td>
            <td>
                <div class="goods-item">
                    <div class="xk">
                        <img src="images/sj2.png" class="img" />
                    </div>
                    <p class="goods-title">
                        苹果【现货速发】苹果 iPhone 15 Pro全网通5G 苹果手机apple 苹果15pro 黑色钛金属 6.1寸 256G 店保2年+配件礼包
                    </p>
                    <div class="price">
                        599.<span class="xiaoshu">99</span>$
                    </div>
                </div>
            </td>
            <td>
                <div class="goods-item">
                    <div class="xk">
                        <img src="images/sj3.png" class="img" />
                    </div>
                    <p class="goods-title">
                        苹果【现货速发】苹果 iPhone 15 Pro全网通5G 苹果手机apple 苹果15pro 白色钛金属 6.1寸 256G 店保2年+配件礼包
                    </p>
                    <div class="price">
                        699.<span class="xiaoshu">99</span>$
                    </div>
                </div>
            </td>
            <td>
                <div class="goods-item">
                    <div class="xk">
                        <img src="images/sj4.png" class="img" />
                    </div>
                    <p class="goods-title">
                        拍拍 苹果【24期免息】Apple iPhone16Promax 苹果16Pro 全新美版有锁 iPhone16Promax 原色 256GB【原版未激活+店保2年】
                    </p>
                    <div class="price">
                        799.<span class="xiaoshu">99</span>$
                    </div>
                </div>
            </td>
            <td>
                <div class="goods-item">
                    <div class="xk">
                        <img src="images/sj5.png" class="img" />
                    </div>
                    <p class="goods-title">

                        Apple【0首付24期免息】苹果15iPhone15全新美版有锁全网通5G手机 iPhone15 圣诞节 128G+一年电池免费换新+店保两年
                    </p>
                    <div class="price">
                        899.<span class="xiaoshu">99</span>$
                    </div>
                </div>
            </td>
            <td>
                <div class="goods-item">
                    <div class="xk">
                        <img src="images/sj6.png" class="img" />
                    </div>
                    <p class="goods-title">
                        苹果【12期免息】Apple iPhone15 苹果15 全新美版有锁 三网通5G手机 15 6.1英寸 粉色 128GB【原版未激活+店保2年】
                    </p>
                    <div class="price">
                        999.<span class="xiaoshu">99</span>$
                    </div>
                </div>
            </td>
        </tr>

    </table>

</body>

</html>

效果展示

延延oO
关注
用纯CSS展示各种设备外观，如iPhone X、Galaxy S8、iMac等
HackWhisper的博客
10-05 159
总结起来，使用纯CSS可以展示各种设备的外观效果，通过定义不同的CSS类并调整相关样式属性，我们可以模拟不同设备的外观，从而更好地展示网页在不同设备上的显示情况。在网页设计和开发中，经常需要展示不同设备的外观效果，以便用户能够更好地了解网页在不同设备上的显示情况。通过以上的HTML结构和CSS样式，我们可以在浏览器中展示各种设备的外观效果。的CSS类，用于包裹设备的外观。然后，我们可以为每个设备定义一个特定的CSS类，以实现它们的不同外观效果。的CSS文件，该文件用于定义各种设备的外观样式。
HTML+CSS+JS大作业：商城网购网站设计——淘宝1页
而风不止
11-17 2581
HTML：结构CSS：样式 GF 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
手机网页(HTML+CSS)
2302_78381559的博客
06-11 1201
前言本篇博客就不给大家讲解了，直接上代码💓 个人主页：普通young man-CSDN博客⏩ 文章专栏：若有问题 评论区见📝。
CSS 美化页面（一）
最新发布
分享我的点点滴滴，在成长路上与你同行！
03-26 926
CSS 美化页面
手机端CSS笔记（精简）
weixin_46160720的博客
06-14 629
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import
33. 初识移动端CSS
potato123232的博客
07-11 479
从33章之后我们主要针对移动端CSS移动端浏览器基本不需要考虑兼容性问题，原因是移动端的浏览器开发的都比较晚我们可以通过chrome调试工具模拟移动端，打开调试工具后点击这里，就可以看到手机访问时的情况了使用手机端访问相同的地址有时会有不同的效果（根据不同设备进行重定向），比如我们用移动端访问jd.com（会重定向到m.jd.com），一般来讲移动端页面的地址会在原有地址前加m.再用PC端访问有两种移动端页面，一种是开发的时候直接针对移动端进行开发，像上面京东那样（单独制作移动端页面）另一种是页面会根据不同
css布局~移动端
syj_111的博客
02-20 1488
特征：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式；
一款简约的手机APP自适应下载界面HTML源码源码资源下载整理.zip
08-20
媒体查询允许开发者根据设备特性如视口宽度设定不同的CSS样式，确保在不同设备上页面都能正确显示。例如，可能会有针对桌面、平板和手机的特定样式规则。 描述中的“手机APP自适应下载界面”意味着这个HTML模板特别...
Squirrelplate: 简易响应式HTML5文档样式框架介绍
这表明了Squirrelplate是一个完整的资源包，包含了所有必要的CSS样式文件、HTML模板和其他相关资源，以便开发者可以下载后直接使用或根据具体需求进行定制。压缩包文件通常用于简化传输和分发，使得开发者可以轻松地...
MySQL、JDBC、HTML、CSS、JavaScript、jQuery、tomcat、Http、Servlet、JSP、EL、JSTL、Maven、Cookie、Session（框架第一部分）
wrh0740的博客
07-10 5299
第一章 MySQL 1. 数据库 1、什么是数据库？ 所谓的数据库就是指存储和管理数据的仓库 2、数据库有哪些分类？ 3、什么是关系型数据库？ 底层以二维表的形式保存数据的库就是关系型数据库 stu-学生表 4、常见的关系型数据库有哪些？ Sql Server：微软提供，收费，适用于一些中型或大型的项目中，在java中的使用占比不高（.NET中使用的较多） Oracle：甲骨文公司提供，收费，适用于一些大型或者超大型的项目中，在java中的使用占比非常高 mysql：瑞典MySQLAB公司提
静态H5聊天输入对话框html代码（1）
sb11011bs的专栏
12-29 4781
静态H5聊天输入对话框html代码 最近因项目需要做一个android app上面的嵌入一个聊天功能，聊天功能现在是第一版，只需要我们的mm支持客服与用户聊。如果是native开发那就太麻烦了，开发时间长。如果是h5开发应该比较快，关键是可以跨平台，那就不用在安卓苹果电脑上再重新开发一次。下面我将讲述如果用html开发一款聊天的网页程序。废话不说了，先上图。 上图中就是电脑上运行效果，这里是基本框架，还没有开发实际与服务器交互的功能，只实现简单的发送文字等UI的css样式布局，右边的常见问题，可以写
html和css写的华为商城首页静态网页，.zip
10-01
html和css写的华为商城首页静态网页，.zip
HTML+CSS 苹果官网首页
我们好像在哪见过
08-26 493
苹果官网首页阿
CSS移动端适配方案（三种）
朝阳39的博客
10-27 3588
方案一 rem vw cale() 基于rem和vw单位并配合calc()函数的移动端适配代码 html { font-size: 16px; } @media screen and (min-width: 375px) { html { /* 375px作为16px基准，414px宽度时正好对应18px的根字号大小 */ font-size: calc(16px + 2 * (100vw - 375px) / 39); } } @media sc.
前端开发实战：移动端适配CSS技巧
会思想的苇草i的博客
12-12 2669
在前端开发中，移动端适配是指利用CSS技术使网页能够在不同移动设备上呈现良好的显示效果。通过使用响应式布局、媒体查询和弹性布局等技术，开发者可以实现移动端适配，使网页在手机和平板等移动设备上具有良好的可视和交互体验。移动端适配是前端开发中的重要内容，能够提升网站的用户友好性和访问体验。
html实现iphone桌面,Html5实现iPhone开机界面示例代码
weixin_42296571的博客
06-02 509
今天我突发其想，想到可以用Html5来仿照苹果操作系统做一个能在Web平台运行的ios。当然，要开发出一个操作系统，等我再归山修练一百年再说吧。今天就先娱乐一下，先搞一个开机界面。完工后的图片：担心图片是被我PS后的同学可以直接进入下面的地址测试：http://www.cnblogs.com/yorhom/articles/3163078.html由于lufylegend封装得的确不错，本次开发还...
手机还可以这么玩--css3绘制苹果手机
qq_24047659的博客
10-15 624
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
苹果html5插件,纯CSS打造各种超逼真的苹果（Apple）设备模型
weixin_29258297的博客
06-22 726
CSSDevices是一款使用纯CSS制作的各种超逼真的苹果(Apple)设备模型。这些CSS苹果设备模型中可以嵌入图片、文字、视频等HTML元素，并且非常容易的就可以制作出轮播图的效果。使用方法使用该CSS苹果设备模型特效需要在页面中引入devices.min.css文件，可以选择引入jQuery和devices.js文件。iphone设备模型iphone设备模型的基本HTML结构如下：可选的i...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值