Question

在这里忍受我 - 我正在尝试学习HTML / CSS。

我有这个操作方法网站dropshipstepbystep.com。我想在成功的第3步中排名第一。在我的主页上，所以我在“我们的焦点”中创建了自定义HTML小部件。 Zerif Lite主题部分。我确定我这样做的方式非常糟糕，但在我的桌面上，我几乎实现了我想要的外观。

现在，我需要能够更改窗口小部件/块的显示方式，以适应更小的屏幕尺寸。我知道我不能在@media中使用inline-CSS，所以我应该怎么做呢？

请像我一样解释5.提前致谢！

PS：不知道它是否有帮助，但这里是我编写第一个自定义CSS小部件的方法......

＆＃13;

<div style= "padding-top: 25px; width: 100%; display: block; margin-bottom: 50px;">
<div style="width:78%; padding-right: 2%; display: inline-block; float: left;">
<h4 style="align: left; line-height:1.5;">Hey!  I'm Zach, and I created Dropship Step by Step to show you exactly how I build and execute a dropshipping project in 2017.  If you find my content useful, I have two things to ask of you: (1) Share it with anyone you know who would also find it valuable, and (2) if you choose to use a service I recommend, please <u>click</u> the link I provide.  Some of the services I recommend pay me referral credits, which is how I keep my content free.  If you don't click, they can't track!</h4>
</div>
<div style="width:18%; padding-left: 2%; display: inline-block; float: left; height: 100%; vertical-align: middle;">
<img src="http://www.dropshipstepbystep.com/wp-content/uploads/2017/09/IMG_4701.png" style="margin-top: -25px; border-radius: 50%;">
</div>
</div>
<div style="display: block;">
<h1 style="padding-top: 50px;"><u>
3 STEPS TO DROPSHIP SUCCESS</u>
</h1>
</div>
<div style= "padding-top: 25px; width: 100%; display: block; margin-bottom: 100px;">
<div style="width:33%; padding-right: 2%; display: inline-block; float: left;">
<img src="http://www.dropshipstepbystep.com/wp-content/uploads/2017/09/Screen-Shot-2017-08-25-at-10.23.39-PM_clipped_rev_1-8.png">
</div>
<div style="width:63%; padding-left: 2%; display: inline-block; float: left;">
<br><h2 style="font-weight: bold;">Find a Product to Sell</h2>
<p style="align: left; line-height:1.5;">I'm going to show you how I find inspiration for product ideas, and how I test my ideas quickly.  The goal is to take something generic and cheap looking, then market in a way that will totally change people's perceptions.  The dash cam on the left is a perfect example.  I get them for $20 and sell them for $60, and they're actually really nice!  I use one myself.</p>
<p style="align: left; line-height:1.5;">You can find many inexpensive products to promote for free via <a href="http://dropshipstepbystep.com/go/aliexpress">AliExpress</a>.  Alternatively, <a href="http://dropshipstepbystep.com/go/salehoo">SaleHoo</a> will tell you exactly how well products are selling around the web, at what profit margin, and what supplier will dropship them for you ($69/year).  Plus,
 you can find American-based suppliers, so your customers don't have to wait weeks for products to arrive.</p>
</div>
</div>

＆＃13;

Answer 1

您可以使用的最好的问题是Bootstrap中的网格系统。你可以在这里找到相关信息 - ANSI 99 SQL standard 以及其他各种教程。对于小型，超小型和中型设备，您基本上只需在屏幕上为小部件分配所需的空间。

除此之外，如果您想在屏幕上放置元素，可以使用flexbox。这里也有各种教程。

两者可以一起使用。我相信你能用Bootstrap来解决你的问题。

Answer 2

您应该首先学习CSS媒体查询以及如何进行响应式网站开发。我建议你可以从W3Cschool学习，下面是参考链接： https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 3

首先请使用外部文件中的CSS。目前，您正在使用难以在@media查询中使用的内联CSS。完成布局后，对不同的设备使用@media查询。

如何针对不同的屏幕尺寸使我的自定义HTML小部件显示不同？

3 个答案: