- HTML5 Web Application Development By Example Beginner's Guide
- J.M. Gustafson
- 536字
- 2021-08-13 16:50:23
Time for action – styles in action
Let's put the border-radius
and box-shadow
effects to good use in our task list application. First, we will center the task list on the page. Then we'll put a box around each task with rounded corners and a shadow. Let's open taskAtHand.css
and make some changes. You can find the code for this section in chapter2/example2.1
.
First, we'll change the style for the <div id="main">
element which contains the task-name
text field and task list. Let's give this section a minimum width of 9em
and a maximum width of 25em
. We don't want the task list to get too wide or too small to make it easier to read. This will give us the beginnings of a reactive layout. We will also set the top and bottom margins to 1em
, and the left and right margins to auto
to center it on the page.
Note
A reactive layout is one that reacts to its environment by adjusting its layout to fit the device it is displayed on. By using reactive layouts, you can ensure that your application works and looks good on any device, ranging from a phone to the desktop.
#main { max-width: 25em; min-width: 9em; margin: 1em auto; }
We also want to change the task-name
text input field to take up the entire width of the main section by setting its width
property to 98%
. This will give it a little wiggle room for the borders of the textbox; 100%
will make it burst at the seams:
#task-name { font-size: 1em; display: block; width: 98%; }
Now let's work on the task-list
items. We will give them a background color, rounded corners, and a shadow. We will make the shadow black and give it some transparency, so that the background color shows through. We will also set the position
property to relative
, so we can position the task buttons inside of it (see the next screenshot):
#task-list .task { position: relative; list-style: none; padding: 0.25em; margin: 0.25em; background-color: beige; border-radius: 4px; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6); }
Let's also add a border around the task buttons to group them, and move them over to the upper-right side of the task
element using absolute positioning. We could also float it right here, but absolute positioning gives us more control:
#task-list .task .tools { position: absolute; top: 0.25em; right: 0.25em; border: 1px solid black; border-radius: 2px; }
Note
When using absolute positioning, elements are positioned relative to the nearest positioned parent element. In this case, that would be the task
element. That's why we set its position
property to relative
.
What just happened?
If you look at the application in the browser, you will notice how much more natural our task list looks. The shadows really make the task items pop out from the page and give them depth. It makes them the stars of the application. By moving the task buttons over to the right out and of the way, we really make the task names stand out:

Resize your browser window and see how the list reacts. Here's the same layout resized smaller, like you might see on a phone or some other mobile device:

- Qt 5 and OpenCV 4 Computer Vision Projects
- Hands-On Image Processing with Python
- Git高手之路
- Scratch真好玩:教小孩學編程
- Kotlin開發教程(全2冊)
- Building Wireless Sensor Networks Using Arduino
- MATLAB GUI純代碼編寫從入門到實戰
- C語言程序設計習題與實驗指導
- C指針原理揭秘:基于底層實現機制
- Clojure Web Development Essentials
- 網絡綜合布線與組網實戰指南
- Managing Windows Servers with Chef
- Learning Gerrit Code Review
- Natural Language Processing with Python Cookbook
- Unity 游戲案例開發大全