How Styles Interact
The Cascade
33
The Cascade: How Styles Interact
CSS
The “Cascade” in CSS refers to how conflicting rules are handled.
The downward movement of water down a cascade is meant to be analogous to how a given style rule will continue to take precedence with child elements
CSS uses the following cascade principles to help it deal with conflicts:
• inheritance,
• specificity, and • location
34
The Cascade: How Styles Interact
Inheritance
Many (but not all) CSS properties affect not only themselves but their descendants as well.
Are inheritable: • Font,
• color,
• list, and
• text properties
Not inheritable: • layout,
• sizing,
• border,
• background, and
• spacing properties
35
The Cascade: How Styles Interact
Inheritance
<br />
body {<br />
font-family: Arial; color: red;<br />
border: 8pt solid green; margin: 60px;<br />
}<br />
<html><br />
Inherited<br />
Inherited Not inherited Not inherited</p>
<div>
<p>
<p>
<p> <small><br />
<time> <time></p>
<h1>
<h2>
<body></p>
<ul>
<h3>
<li>
<li> <a>
<p><div>
36</p>
<p> The Cascade: How Styles Interact<br />
Inheritance<br />
<head> <meta> <title></p>
<h1>
<h2>
<div>
<p>
<html><br />
div {<br />
font-weight: bold;<br />
margin: 50px;<br />
border: 1pt solid green; }<br />
<body></p>
<ul>
<h3>
<li>
<li> <a><br />
Inherited Not inherited Not inherited</p>
<div>
<p>
<p><p> <small><br />
<time> <time><br />
37<br />
The Cascade: How Styles Interact<br />
Specificity<br />
body {<br />
font-weight: bold; color: red;<br />
}<br />
div {<br />
font-weight: normal; color: magenta;<br />
}<br />
p {<br />
color: green;<br />
}<br />
.last {<br />
color: blue;<br />
}<br />
#verylast {<br />
color: orange; font-size: 16pt;<br />
}<br />
<body><br />
This text is not within a p element. </p>
<p>Reviews</p>
<div>
<p>By Ricardo on <time>2016-05-23</time></p>
<p>Easy on the HDR buddy.</p>
<p>This text is not within a p element.
</p></div>
<hr/>
<div>
<p>By Susan on <time>2016-11-18</time></p>
<p>I love Central Park.</p>
</div>
<hr/>
<div>
<p class="last">By Dave on <time>2016-11-24</time></p>
<p class="last" id="verylast">Thanks for posting.</p>
</div>
<hr/>
<p> </body><br />
38</p>
<p> The Cascade<br />
Specificity Value<br />
0001<br />
0002<br />
0010<br />
0100<br />
0101<br />
Specificity Algorithm<br />
1<br />
overrides<br />
element selector<br />
descendant selector (elements only)<br />
2 overrides<br />
class and attribute selectors<br />
overrides 3<br />
id selector 4 overrides<br />
id + additional selectors<br />
overrides 5<br />
A higher specificity value overrides lower specificity values.<br />
div {<br />
color: green;<br />
}<br />
div form { color: orange;<br />
}<br />
.example { color: blue;<br />
}<br />
a[href$=”.pdf”] {<br />
color: blue; }<br />
#firstExample { color: magenta;<br />
}<br />
div #firstExample { color: grey;<br />
}<br />
inline style attribute</p>
<div style="color: red;"> 1000<br />
39<br />
The Cascade: How Styles Interact<br />
Location<br />
overrides 2 overrides 4<br />
1 overrides<br />
Browser’s default style settings<br />
user-styles.css<br />
#example { color: green;<br />
}<br />
<head>
<link rel="stylesheet" href="stylesA.css" />
<link rel="stylesheet" href="stylesWW.css" />
<style>
3 overrides
#example {
color: orange;
color: magenta;
}
</style>
<p></head><br />
<body></p>
<p id="example" style="color: red;">
sample text
</p>
<p> </body><br />
5 overrides<br />
#example { color: blue;<br />
}<br />
6 overrides<br />
40</p>
<p> The Box Model<br />
41<br />
The Box Model<br />
Overview<br />
margin<br />
border<br />
padding<br />
background-color/background-image of element<br />
Every CSS rule begins with a selector. The selector identifies<br />
width<br />
which element or elements in the HTML document will be<br />
affected by the declarations in the rule. Another way of thinking of selectors is that they are a pattern which is used<br />
element content area<br />
by the browser to select the HMTL elements that will receive<br />
height<br />
background-color/background-image of element’s parent<br />
Every CSS rule begins with a selector. The selector identifies which element or elements in the HTML document will be<br />
42<br />
affected by the declarations in the rule. Another way of thinking of selectors is that they are a pattern that is used</p>
<p> The Box Model<br />
Background<br />
• Background<br />
• Background-attachment • Background-color<br />
• Background-image<br />
• Background-position<br />
• Background-repeat<br />
• Background-size<br />
43<br />
The Box Model<br />
Background<br />
44</p>
<p> The Box Model<br />
Collapsing Margins<br />
45<br />
The Box Model<br />
CSS TRBL Shortcut<br />
border-top-color: red; /* sets just the top side */ border-right-color: green; /* sets just the right side */ border-bottom-color: yellow; /* sets just the bottom side */ border-left-color: blue; /* sets just the left side */<br />
Alternately, we can set all four sides at once: border-color: red; /* sets all four sides to red */ border-color: red green orange blue; /* sets 4 colors */<br />
46</p>
<p> The Box Model<br />
Box Dimensions<br />
47<br />
The Box Model<br />
Limitations of Height Property<br />
48</p>
<p> The Box Model<br />
Overflow Property<br />
49<br />
CSS Text Styling<br />
50</p>
<p> CSS Text Styling<br />
Font Family<br />
Property Description<br />
font A combined shorthand property that allows you to set the family, style, size, variant, and weight in one<br />
property.<br />
style weight variant size font-family<br />
font-family Specifies the typeface/font to use. More than one can be specified.<br />
font-size The size of the font in one of the measurement units<br />
font-style Specifies whether italic, oblique, or normal<br />
font-variant Specifies either small-caps text or none<br />
font-weight Specifies either normal, bold, bolder, lighter, or a value between 100 and 900 in multiples of 100,<br />
where larger number represents weightier (i.e., bolder) text.<br />
51<br />
CSS Text Styling<br />
Specifying the Font Family<br />
1 Use this font as 3 If it isn’t available, the first choice. then use this one.<br />
p { font-family: Cambria, Georgia, “Times New Roman”, serif; }<br />
2 But if it is not available, 4 And if it is not available then use this one. either, then use the<br />
default generic serif font.<br />
52</p>
<p> CSS Text Styling<br />
Different Font Families<br />
53<br />
CSS Text Styling<br />
Font Sizes<br />
<body></p>
<h3>
<h2>
<h1>
/* using 16px scale */<br />
body { font-size: 100%; }<br />
p { font-size: 1em; }<br />
h3 { font-size: 1.125em; } /* 1.25 x 16 = 18 */ h2 { font-size: 1.5em; } /* 1.5 x 16 = 24 */ h1 { font-size: 2em; } /* 2 x 16 = 32 */<br />
<body><br />
Browser’s default text size is usually 16 pixels </p>
<p>100% or 1em is 16 pixels</p>
<h3>125% or 1.125em is 18 pixels</h3>
<h2>150% or 1.5em is 24 pixels</h2>
<h1>200% or 2em is 32 pixels</h1>
<p></body><br />
/* 1.0 x 16 = 16 */<br />
54</p>
<p> CSS Text Styling<br />
Paragraph Properties<br />
Just as there are properties that affect the font in CSS, there are also a range of CSS properties that affect text independently of the font.<br />
• letter-spacing<br />
• line-height<br />
• text-align<br />
• text-decoration • text-direction<br />
• text-shadow •…<br />
55<br />
Normal Flow<br />
56</p>
<p> Normal Flow<br />
To understand CSS positioning and layout, it is essential that we understand this distinction as well as the idea of normal flow:<br />
how the browser will normally display block-level elements and inline elements from left to right and from top to bottom<br />
57<br />
Normal Flow<br />
• Block-level elements such as </p>
<p>, </p>
<div>, </p>
<h2>, </p>
<ul>, and </p>
<table> are each contained on their own line.<br />
• Inline elements do not form their own blocks but instead are displayed within lines.<br />
58</p>
<p> Normal Flow<br />
Block-Level Elements<br />
Browser</p>
<h1> … </h1>
<ul>
</ul>
</p>
<div> </div>
<h2> … </h2>
</p>
<p> Each block exists on its own line and is displayed in normal flow from the browser window’s top to its bottom.<br />
By default each block-level element fills up the entire width of its parent (in this case, it is the <body>, which is equivalent to the width of the browser window).<br />
You can use CSS box model properties to customize, for instance, the width of the box and the margin space between other block-level elements.<br />
59<br />
Normal Flow<br />
Inline Elements</p>
<p>
This photo <img decoding="async" src="photo-con.png" alt="..." /> of Conservatory Pond in <a href="http://www.centralpark.com/">Central Park</a> New York City<br />
was taken on October 22, 2015 with a <strong>Canon EOS 30D</strong> camera.
</p>
<p>Inline content is laid out horizontally left to right within its container.<br />
Once a line is filled with content, the next line will receive the remaining content, and so on.<br />
Here the content of this </p>
<p> element is displayed on two lines.<br />
If the browser window resizes, then inline content will be “reflowed” based on the new width.<br />
Here the content of this </p>
<p> element is now displayed on three lines.<br />
Browser</p>
<p> text<br />
<img><br />
text<br />
<a><br />
text<br />
<strong><br />
text<br />
Browser</p>
<p>
text<br />
text
</p>
<p><img><br />
<strong><br />
<a><br />
text<br />
text<br />
60</p>
<p> Normal Flow<br />
Block and Inline Elements<br />
Browser</p>
<h1>
</h1>
</p>
<div>
</div>
<ul>
</ul>
<p> text<br />
<span><br />
text<br />
text</p>
<h2>
</h2>
</p>
<p>text<br />
<img><br />
text <strong> text<br />
<a><br />
text<br />
text<br />
text</p>
<li> … </li>
<li> … </li>
<p> A document consists of block-level elements stacked from top to bottom.<br />
Within a block, inline content is horizontally placed left to right.<br />
Some block-level elements can contain other block-level elements (in this example, a </p>
<div> can contain other blocks).<br />
In such a case, the block-level content inside the parent is stacked from top to bottom within the container (</p>
<div>).<br />
61<br />
Positioning Elements<br />
62</p>
<p> Positioning Elements<br />
• absolute The element is removed from normal flow and positioned in relation to its nearest positioned ancestor.<br />
• fixed The element is fixed in a specific position in the window even when the document is scrolled.<br />
• relative The element is moved relative to where it would be in the normal flow.<br />
• static The element is positioned according to the normal flow. This is the default.<br />
63<br />
Positioning Elements<br />
Relative Positioning<br />
64</p>
<p> Positioning Elements<br />
Absolute Positioning<br />
65<br />
Positioning Elements<br />
Absolute Positioning is relative to nearest positioned ancestor<br />
66</p>
<p> Positioning Elements<br />
Z-Index<br />
figure {<br />
position: absolute;<br />
top: 150px;<br />
left: 200px;<br />
}<br />
figcaption {<br />
position: absolute;<br />
top: 90px;<br />
left: 140px;<br />
}<br />
figure { …<br />
67<br />
z-index: 5;<br />
}<br />
figcaption {<br />
…<br />
}<br />
Note that this did not move the </p>
<figure> on top of the<figcaption> as one<br />
Positioning Elements<br />
Z-Index<br />
might expect. This is due to the nesting of the caption within the figure.<br />
figure { …<br />
z-index: 1;<br />
}<br />
figcaption {<br />
…<br />
z-index: -1;<br />
}<br />
Instead the<figcaption> z-index must be set below 0. The </p>
<figure> z-index<br />
z-index: 1;<br />
could be any value equal to or above 0.<br />
If the </p>
<figure> z-index is given a value less than 0, then any of its positioned descendants change as well. Thus both the </p>
<figure> and<figcaption> move underneath the body text.<br />
figure { …<br />
z-index: -1;<br />
}<br />
figcaption {<br />
…<br />
z-index: 1;<br />
}<br />
68</p>
<p> gure is fixed regardless of the page<br />
ed.<br />
Positioning Elements<br />
Fixed Position<br />
figure { …<br />
position: fixed;<br />
top: 0;<br />
left: 0; }<br />
69<br />
Notice that fi in its position of what part is being view<br />
Floating Elements<br />
70</p>
<p> Floating Elements<br />
It is possible to displace an element out of its position in the normal flow via the CSS float property<br />
• •<br />
An element can be floated to the left or floated to the right .<br />
it is moved all the way to the far left or far right of its containing block and the rest of the content is “reflowed” around the floated element<br />
71<br />
Floating Elements</p>
<h1>Float example</h1>
<p>A wonderful serenity has taken …</p>
<figure>
<img decoding="async" src="images/828.jpg" alt="..." /><figcaption>British Museum</figcaption></figure>
<p>When, while the lovely valley …</p>
<p>Notice that a floated block-level element should have a width specified.<br />
figure {<br />
border: 1pt solid #A8A8A8; background-color: #EDEDDD; margin: 0;<br />
padding: 5px;<br />
width: 150px;<br />
}<br />
figure { …<br />
width: 150px;<br />
float: left;<br />
}<br />
figure { …<br />
width: 150px; float: right; margin: 10px;<br />
}<br />
72</p>
<p> Floating Elements<br />
Floating Multiple Items Side by Side</p>
<article>
<figure>
<img decoding="async" src="images/tiny/275.jpg" alt="..." /><figcaption>Westminister</figcaption></figure>
<figure>
<img decoding="async" src="images/tiny/700.jpg" alt="..." /><figcaption>Emirates Stadium</figcaption></figure>
<figure>
<img decoding="async" src="images/tiny/537.jpg" alt="..." /><figcaption>Albert Hall</figcaption></figure>
<figure>
<img decoding="async" src="images/tiny/828.jpg" alt="..." /><figcaption>British Museum</figcaption></figure>
<figure>
<img decoding="async" src="images/tiny/464.jpg" alt="..." /><figcaption>Wellington Monument</figcaption></figure>
<figure>
<img decoding="async" src="images/tiny/224.jpg" alt="..." /><figcaption>Lewes Castle</figcaption></figure>
<p>When, while the lovely valley teems .. </article>
<p>As the window resizes, the content in the containing block (the </p>
<article> element),<br />
will try to fill the space that is available to the right of the floated elements.<br />
figure { …<br />
width: 150px;<br />
float: left;<br />
}<br />
73<br />
Floating Elements<br />
Floating Multiple Items Side by Side<br />
Stop elements from flowing around a floated element by using the clear property</p>
<article>
<figure>
<img decoding="async" src="images/tiny/275.jpg" alt="..." /><figcaption>Westminister</figcaption></figure>
<figure>
<img decoding="async" src="images/tiny/700.jpg" alt="..." /><figcaption>Emirates Stadium</figcaption></figure>
<figure>
<img decoding="async" src="images/tiny/537.jpg" alt="..." /><figcaption>Albert Hall</figcaption></figure>
<figure class="first">
<img decoding="async" src="images/tiny/828.jpg" alt="..." /><figcaption>British Museum</figcaption></figure>
<figure>
<img decoding="async" src="images/tiny/464.jpg" alt="..." /><figcaption>Wellington Monument</figcaption></figure>
<figure>
<img decoding="async" src="images/tiny/224.jpg" alt="..." /><figcaption>Lewes Castle</figcaption></figure>
<p class="first">When, while the lovely … </article>
<p> .first { clear: left; }<br />
74</p>
<p> Floating Elements<br />
Clear property<br />
• left The left-hand edge of the element cannot be adjacent to another element.<br />
• right The right-hand edge of the element cannot be adjacent to another element.<br />
• both Both the left-hand and right-hand edges of the element cannot be adjacent to another element.<br />
• none The element can be adjacent to other elements.<br />
75<br />
Floating Elements<br />
Containing Floats<br />
Another problem that can occur with floats is when an element is floated within a containing block that contains only floated content. In such a case, the containing block essentially disappears</p>
<article>
<figure>
<img decoding="async" src="images/828.jpg" alt="..." /><figcaption>British Museum</figcaption></figure>
<p class="first">When, while the lovely valley …<br />
</article>
<p> figure img { width: 170px; margin: 0 5px; float: left;<br />
}<br />
figure figcaption {<br />
width: 100px;<br />
float: left;<br />
}<br />
figure {<br />
border: 1pt solid #262626; background-color: #c1c1c1; padding: 5px;<br />
width: 400px;<br />
margin: 10px; }<br />
.first { clear: left; }<br />
Notice that the </p>
<figure> element’s content area has shrunk down to zero (it now just has padding space and borders).<br />
76</p>
<p> Floating Elements<br />
Overlaying and Hiding Element<br />
figure {<br />
border: 1pt solid #262626; background-color: #c1c1c1; padding: 10px;<br />
width: 200px;<br />
margin: 10px;<br />
}<br />
figcaption { background-color: black; color: white;<br />
opacity: 0.6;<br />
width: 140px;<br />
height: 20px;<br />
padding: 5px;<br />
130px<br />
}<br />
figure { …<br />
position: relative;<br />
}<br />
figcaption {<br />
…<br />
position: absolute;<br />
top: 130px;<br />
left: 10px;<br />
}<br />
This creates the positioning context.<br />
This does the actual move.<br />
77<br />
Floating Elements<br />
Using display</p>
<figure>
<img decoding="async" src="images/828.jpg" alt="..." /><figcaption>British Museum</figcaption><img decoding="async" src="images/new-banner.png" alt="" class="overlayed"/><br />
</figure>
<p> .overlayed {<br />
position: absolute; top: 10px;<br />
left: 10px;<br />
}<br />
new-banner.png<br />
Transparent area<br />
<img ... class="overlayed hide"/><br />
.overlayed {<br />
position: absolute; top: 10px;<br />
left: 10px; display: none;<br />
}<br />
.hide {<br />
display: none;<br />
This hides the overlayed image.<br />
}<br />
This is the preferred way to hide: by adding this additional class to the element. This makes it clear in the markup that<br />
the element is not visible.<br />
78<br />
NEW</p>
<p> Floating Elements<br />
Comparing visibility with display<br />
figure { …<br />
display: auto;<br />
}<br />
figure { …<br />
display: none;<br />
}<br />
figure { …<br />
visibility: hidden;<br />
}<br />
79<br />
Floating Elements<br />
Using Hover with display</p>
<figure class="thumbnail">
<img decoding="async" src="images/828.jpg" alt="..." /><figcaption class="popup">
<img decoding="async" src="images/828-bigger.jpg" alt="..." /></p>
<p>The library in the British Museum in London</p>
</figcaption></figure>
<p>When the page is displayed, the larger version of the image, which is within the<figcaption> element, is hidden.<br />
figcaption.popup { padding: 10px; background: #e1e1e1; position: absolute;<br />
/* add a drop shadow to the frame */<br />
box-shadow: 0 0 15px #A9A9A9;<br />
/* hide it until there is a hover */<br />
visibility: hidden;<br />
}<br />
figure.thumbnail:hover figcaption.popup { position: absolute;<br />
top: 0;<br />
left: 100px;<br />
/* display image upon hover */<br />
visibility: visible;<br />
}<br />
When the user moves/hovers the mouse over the thumbnail image, the visibility property of the<figcaption> element is set to visible.<br />
80</p>
<p> Styling Tables<br />
81<br />
Styling Tables<br />
Table Borders<br />
table {<br />
border: solid 1pt black;<br />
}<br />
table {<br />
border: solid 1pt black;<br />
}<br />
td {<br />
border: solid 1pt black; }<br />
table {<br />
border: solid 1pt black; border-collapse: collapse;<br />
}<br />
td {<br />
border: solid 1pt black; }<br />
table {<br />
border: solid 1pt black; border-collapse: collapse;<br />
}<br />
td {<br />
82<br />
border: solid 1pt black;<br />
padding: 10pt; }</p>
<p> Styling Tables<br />
Table Borders<br />
table {<br />
border: solid 1pt black; border-collapse: collapse;<br />
}<br />
td {<br />
border: solid 1pt black; }<br />
table {<br />
border: solid 1pt black; border-collapse: collapse;<br />
}<br />
td {<br />
border: solid 1pt black;<br />
padding: 10pt; }<br />
table {<br />
border: solid 1pt black; border-spacing: 10pt;<br />
}<br />
td {<br />
border: solid 1pt black; }<br />
83<br />
Styling Tables<br />
Boxes<br />
caption {<br />
font-weight: bold;<br />
padding: 0.25em 0 0.25em 0;<br />
text-align: left;<br />
text-transform: uppercase;<br />
border-top: 1px solid #DCA806;<br />
}<br />
table {<br />
font-size: 0.8em;<br />
font-family: Arial, sans-serif;<br />
border-collapse: collapse;<br />
border-top: 4px solid #DCA806;<br />
border-bottom: 1px solid white;<br />
text-align: left;<br />
}<br />
thead tr {<br />
background-color: #CACACA;<br />
} 84 th {<br />
padding: 0.75em;<br />
}</p>
<p> padding: 0.25em 0 0.25em 0;<br />
text-align: left;<br />
text-transform: uppercase;<br />
Styling Tables<br />
Boxes<br />
border-top: 1px solid #DCA806;<br />
}<br />
table {<br />
font-size: 0.8em;<br />
font-family: Arial, sans-serif;<br />
border-collapse: collapse;<br />
border-top: 4px solid #DCA806;<br />
border-bottom: 1px solid white;<br />
text-align: left;<br />
}<br />
thead tr {<br />
background-color: #CACACA;<br />
}<br />
th {<br />
} font-weight: bold;<br />
padding: 0.25em 0 0.25em 0; text-align: left; text-transform: uppercase; border-top: 1px solid #DCA806;<br />
}<br />
table {<br />
font-size: 0.8em;<br />
padding: 0.75em; caption {<br />
font-family: Arial, sans-serif;<br />
tbody tr {<br />
border-collapse: collapse;<br />
background-color: #F1F1F1; border-top: 4px solid #DCA806;<br />
border-bottom: 1px solid white; border-bottom: 1px solid white;<br />
color: #6E6E6E;<br />
} text-align: left;<br />
}<br />
85<br />
tbody td {<br />
padding: 0.75em;<br />
}<br />
Styling Tables<br />
Boxes<br />
thead tr {<br />
background-color: #CACACA;<br />
}<br />
th {<br />
padding: 0.75em;<br />
}<br />
tbody tr {<br />
background-color: #F1F1F1;<br />
border-bottom: 1px solid white;<br />
color: #6E6E6E;<br />
}<br />
tbody td {<br />
padding: 0.75em;<br />
}<br />
86</p>
<p> Styling Tables<br />
Hover & Zebras<br />
tbody tr:hover {<br />
background-color: #9e9e9e;<br />
color: black;<br />
}<br />
tbody tr:nth-child(even) {<br />
background-color: lightgray;<br />
}<br />
87<br />
CSS Frameworks<br />
88</p>
<p> CSS Frameworks and Preprocessors<br />
Grid in print design<br />
Most page design begins with a grid. In this case, a seven-column grid is being used to layout page elements in Adobe InDesign.<br />
Without the gridlines visible, the elements on the page do not look random, but planned and harmonious.<br />
89<br />
CSS Frameworks and Preprocessors<br />
Using Bootstrap<br />
<head>
<link href="bootstrap.css" rel="stylesheet">
</head><br />
<body></p>
<div class="container">
<div class="row">
<div class="col-md-2"> left column
</div>
<div class="col-md-7">
main content
</div>
<div class="col-md-3"> right column
</div>
</p></div>
</p></div>
<p></body><br />
90</p>
<p> CSS Frameworks and Preprocessors<br />
CSS Preprocessors<br />
$colorSchemeA: #796d6d; $colorSchemeB: #9c9c9c; $paddingCommon: 0.25em;<br />
footer {<br />
background-color: $colorSchemeA; padding: $paddingCommon * 2;<br />
}<br />
@mixin rectangle($colorBack, $colorBorder) { border: solid 1pt $colorBorder;<br />
margin: 3px;<br />
background-color: $colorBack;<br />
}<br />
fieldset {<br />
@include rectangle($colorSchemeB, $colorSchemeA);<br />
}<br />
.box {<br />
@include rectangle($colorSchemeA, $colorSchemeB); padding: $paddingCommon;<br />
}<br />
Sass source file, e.g., source.scss<br />
This example uses Sass (Syntactically Awesome Stylesheets). Here three variables are defined.<br />
You can reference variables elsewhere. Sass also supports math operators on its variables.<br />
A mixin is like a function and can take parameters. You can use mixins to encapsulate common styling.<br />
A mixin can be referenced/called and passed parameters.<br />
The processor is some type of tool that the developer would run.<br />
The output from the processor is a normal CSS file that would then be referenced in the HTML source file.<br />
Sass Processor<br />
footer {<br />
padding: 0.50em; background-color: #796d6d;<br />
}<br />
fieldset {<br />
border: solid 1pt #796d6d; margin: 3px; background-color: #9c9c9c;<br />
}<br />
.box {<br />
border: solid 1pt #9c9c9c; margin: 3px; background-color: #796d6d; padding: 0.25em;<br />
}<br />
Generated CSS file, e.g., styles.css<br />
91</p>
</div><!-- .entry-content .clear -->
</div>
</article><!-- #post-## -->
<nav class="navigation post-navigation" aria-label="Post navigation">
<span class="screen-reader-text">Post navigation</span>
<div class="nav-links"><div class="nav-previous"><a title="CS计算机代考程序代写 cache Quiz14" href="https://powcoder.com/2021/08/15/cs%e8%ae%a1%e7%ae%97%e6%9c%ba%e4%bb%a3%e8%80%83%e7%a8%8b%e5%ba%8f%e4%bb%a3%e5%86%99-cache-quiz14/" rel="prev"><span class="ast-left-arrow">←</span> Previous Post</a></div><div class="nav-next"><a title="CS计算机代考程序代写 mips Quiz5" href="https://powcoder.com/2021/08/15/cs%e8%ae%a1%e7%ae%97%e6%9c%ba%e4%bb%a3%e8%80%83%e7%a8%8b%e5%ba%8f%e4%bb%a3%e5%86%99-mips-quiz5/" rel="next">Next Post <span class="ast-right-arrow">→</span></a></div></div>
</nav><div class="ast-single-related-posts-container ast-container--fallback"><div class="ast-related-posts-title-section"> <h2 class="ast-related-posts-title"> Related Posts </h2> </div><div class="ast-related-posts-wrapper"> <article class="ast-related-post post-38 post type-post status-publish format-standard hentry category-uncategorized tag-matlab tag-simulation">
<div class="ast-related-posts-inner-section">
<div class="ast-related-post-content">
<div class="ast-related-post-featured-section ast-no-thumb"></div> <header class="entry-header related-entry-header">
<h3 class="ast-related-post-title entry-title">
<a href="https://powcoder.com/2016/06/21/matlab-simulation/" target="_self" rel="bookmark noopener noreferrer">matlab simulation</a>
</h3>
<div class="entry-meta ast-related-cat-style--none ast-related-tag-style--none"><span class="ast-taxonomy-container cat-links default"><a href="https://powcoder.com/category/uncategorized/" rel="category tag">程序代写 CS代考</a></span> / <span class="ast-taxonomy-container tags-links default"><a href="https://powcoder.com/tag/matlab/" rel="tag">matlab代写代考</a>, <a href="https://powcoder.com/tag/simulation/" rel="tag">simulation</a></span></div> </header>
<div class="entry-content clear">
</div>
</div>
</div>
</article>
<article class="ast-related-post post-39 post type-post status-publish format-standard hentry category-uncategorized tag-c">
<div class="ast-related-posts-inner-section">
<div class="ast-related-post-content">
<div class="ast-related-post-featured-section ast-no-thumb"></div> <header class="entry-header related-entry-header">
<h3 class="ast-related-post-title entry-title">
<a href="https://powcoder.com/2016/06/21/ab202-assignment-1-arkapong/" target="_self" rel="bookmark noopener noreferrer">AB202 Assignment 1: Arkapong</a>
</h3>
<div class="entry-meta ast-related-cat-style--none ast-related-tag-style--none"><span class="ast-taxonomy-container cat-links default"><a href="https://powcoder.com/category/uncategorized/" rel="category tag">程序代写 CS代考</a></span> / <span class="ast-taxonomy-container tags-links default"><a href="https://powcoder.com/tag/c/" rel="tag">c++代做</a></span></div> </header>
<div class="entry-content clear">
</div>
</div>
</div>
</article>
<article class="ast-related-post post-40 post type-post status-publish format-standard hentry category-uncategorized tag-c">
<div class="ast-related-posts-inner-section">
<div class="ast-related-post-content">
<div class="ast-related-post-featured-section ast-no-thumb"></div> <header class="entry-header related-entry-header">
<h3 class="ast-related-post-title entry-title">
<a href="https://powcoder.com/2016/06/21/msc-c-programming/" target="_self" rel="bookmark noopener noreferrer">MSc C++ Programming</a>
</h3>
<div class="entry-meta ast-related-cat-style--none ast-related-tag-style--none"><span class="ast-taxonomy-container cat-links default"><a href="https://powcoder.com/category/uncategorized/" rel="category tag">程序代写 CS代考</a></span> / <span class="ast-taxonomy-container tags-links default"><a href="https://powcoder.com/tag/c/" rel="tag">c++代做</a></span></div> </header>
<div class="entry-content clear">
</div>
</div>
</div>
</article>
<article class="ast-related-post post-41 post type-post status-publish format-standard hentry category-uncategorized tag-prolog">
<div class="ast-related-posts-inner-section">
<div class="ast-related-post-content">
<div class="ast-related-post-featured-section ast-no-thumb"></div> <header class="entry-header related-entry-header">
<h3 class="ast-related-post-title entry-title">
<a href="https://powcoder.com/2016/06/21/msc-assessed-prolog-lab-exercise-2/" target="_self" rel="bookmark noopener noreferrer">MSc Assessed Prolog Lab Exercise 2</a>
</h3>
<div class="entry-meta ast-related-cat-style--none ast-related-tag-style--none"><span class="ast-taxonomy-container cat-links default"><a href="https://powcoder.com/category/uncategorized/" rel="category tag">程序代写 CS代考</a></span> / <span class="ast-taxonomy-container tags-links default"><a href="https://powcoder.com/tag/prolog/" rel="tag">Prolog代写代考</a></span></div> </header>
<div class="entry-content clear">
</div>
</div>
</div>
</article>
<article class="ast-related-post post-49 post type-post status-publish format-standard hentry category-uncategorized tag-c tag-uml">
<div class="ast-related-posts-inner-section">
<div class="ast-related-post-content">
<div class="ast-related-post-featured-section ast-no-thumb"></div> <header class="entry-header related-entry-header">
<h3 class="ast-related-post-title entry-title">
<a href="https://powcoder.com/2016/06/21/spring-session2015assignment-1/" target="_self" rel="bookmark noopener noreferrer">Spring Session:2015:Assignment 1</a>
</h3>
<div class="entry-meta ast-related-cat-style--none ast-related-tag-style--none"><span class="ast-taxonomy-container cat-links default"><a href="https://powcoder.com/category/uncategorized/" rel="category tag">程序代写 CS代考</a></span> / <span class="ast-taxonomy-container tags-links default"><a href="https://powcoder.com/tag/c/" rel="tag">c++代做</a>, <a href="https://powcoder.com/tag/uml/" rel="tag">UML</a></span></div> </header>
<div class="entry-content clear">
</div>
</div>
</div>
</article>
<article class="ast-related-post post-51 post type-post status-publish format-standard hentry category-uncategorized tag-uml">
<div class="ast-related-posts-inner-section">
<div class="ast-related-post-content">
<div class="ast-related-post-featured-section ast-no-thumb"></div> <header class="entry-header related-entry-header">
<h3 class="ast-related-post-title entry-title">
<a href="https://powcoder.com/2016/06/21/assignment-2-inception-and-elaboration/" target="_self" rel="bookmark noopener noreferrer">Assignment 2: "Inception and Elaboration"</a>
</h3>
<div class="entry-meta ast-related-cat-style--none ast-related-tag-style--none"><span class="ast-taxonomy-container cat-links default"><a href="https://powcoder.com/category/uncategorized/" rel="category tag">程序代写 CS代考</a></span> / <span class="ast-taxonomy-container tags-links default"><a href="https://powcoder.com/tag/uml/" rel="tag">UML</a></span></div> </header>
<div class="entry-content clear">
</div>
</div>
</div>
</article>
<article class="ast-related-post post-55 post type-post status-publish format-standard hentry category-uncategorized tag-android tag-java">
<div class="ast-related-posts-inner-section">
<div class="ast-related-post-content">
<div class="ast-related-post-featured-section ast-no-thumb"></div> <header class="entry-header related-entry-header">
<h3 class="ast-related-post-title entry-title">
<a href="https://powcoder.com/2016/06/21/android-app/" target="_self" rel="bookmark noopener noreferrer">android app</a>
</h3>
<div class="entry-meta ast-related-cat-style--none ast-related-tag-style--none"><span class="ast-taxonomy-container cat-links default"><a href="https://powcoder.com/category/uncategorized/" rel="category tag">程序代写 CS代考</a></span> / <span class="ast-taxonomy-container tags-links default"><a href="https://powcoder.com/tag/android/" rel="tag">android</a>, <a href="https://powcoder.com/tag/java/" rel="tag">Java代写代考</a></span></div> </header>
<div class="entry-content clear">
</div>
</div>
</div>
</article>
<article class="ast-related-post post-57 post type-post status-publish format-standard hentry category-uncategorized tag-java tag-junit">
<div class="ast-related-posts-inner-section">
<div class="ast-related-post-content">
<div class="ast-related-post-featured-section ast-no-thumb"></div> <header class="entry-header related-entry-header">
<h3 class="ast-related-post-title entry-title">
<a href="https://powcoder.com/2016/06/21/comp220-software-development-tools/" target="_self" rel="bookmark noopener noreferrer">COMP220: Software Development Tools</a>
</h3>
<div class="entry-meta ast-related-cat-style--none ast-related-tag-style--none"><span class="ast-taxonomy-container cat-links default"><a href="https://powcoder.com/category/uncategorized/" rel="category tag">程序代写 CS代考</a></span> / <span class="ast-taxonomy-container tags-links default"><a href="https://powcoder.com/tag/java/" rel="tag">Java代写代考</a>, <a href="https://powcoder.com/tag/junit/" rel="tag">junit</a></span></div> </header>
<div class="entry-content clear">
</div>
</div>
</div>
</article>
</div> </div> </main><!-- #main -->
</div><!-- #primary -->
<div class="widget-area secondary" id="secondary" itemtype="https://schema.org/WPSideBar" itemscope="itemscope">
<div class="sidebar-main" >
<aside id="custom_html-2" class="widget_text widget widget_custom_html"><h2 class="widget-title">Contact</h2><div class="textwidget custom-html-widget"><ul>
<li><strong>QQ: 1823890830</strong></li>
<li><strong>微信号(WeChat): powcoder</strong></li>
<li><img data-recalc-dims="1" class="alignnone wp-image-366" src="https://i0.wp.com/powcoder.com/wp-content/uploads/2021/01/powcoder.jpg?resize=133%2C133&ssl=1" alt="myweixin" width="133" height="133"/></li>
<li><strong>Email: <a href="mailto:powcoder@163.com">powcoder@163.com</a></strong></li>
</ul>
<ul>
<li><strong>请加微信或QQ发要求</strong></li>
<li><strong>Contact me through WeChat</strong></li>
</ul>
</div></aside><aside id="categories-2" class="widget widget_categories"><h2 class="widget-title">Categories</h2><nav aria-label="Categories">
<ul>
<li class="cat-item cat-item-245"><a href="https://powcoder.com/category/machine-learning/">机器学习代写代考 machine learning</a>
</li>
<li class="cat-item cat-item-242"><a href="https://powcoder.com/category/database-db-sql/">数据库代写代考 DB Database SQL</a>
</li>
<li class="cat-item cat-item-244"><a href="https://powcoder.com/category/data-structure-algorithm/">数据结构算法代写代考 data structure algorithm</a>
</li>
<li class="cat-item cat-item-239"><a href="https://powcoder.com/category/%e4%ba%ba%e5%b7%a5%e6%99%ba%e8%83%bd-ai-artificial-intelligence/">人工智能 AI Artificial Intelligence</a>
</li>
<li class="cat-item cat-item-247"><a href="https://powcoder.com/category/compiler/">编译器原理 Compiler</a>
</li>
<li class="cat-item cat-item-254"><a href="https://powcoder.com/category/network-socket/">计算机网络 套接字编程 computer network socket programming</a>
</li>
<li class="cat-item cat-item-240"><a href="https://powcoder.com/category/hadoop-map-reduce-spark-hbase/">大数据 Hadoop Map Reduce Spark HBase</a>
</li>
<li class="cat-item cat-item-241"><a href="https://powcoder.com/category/%e6%93%8d%e4%bd%9c%e7%b3%bb%e7%bb%9fosoperating-system/">操作系统OS代写代考 (Operating System)</a>
</li>
<li class="cat-item cat-item-250"><a href="https://powcoder.com/category/computer-architecture/">计算机体系结构代写代考 Computer Architecture</a>
</li>
<li class="cat-item cat-item-251"><a href="https://powcoder.com/category/computer-graphics-opengl-webgl/">计算机图形学 Computer Graphics opengl webgl</a>
</li>
<li class="cat-item cat-item-249"><a href="https://powcoder.com/category/nlp/">自然语言处理 NLP natural language processing</a>
</li>
<li class="cat-item cat-item-383"><a href="https://powcoder.com/category/%e5%b9%b6%e8%a1%8c%e8%ae%a1%e7%ae%97/">并行计算</a>
</li>
<li class="cat-item cat-item-253"><a href="https://powcoder.com/category/computation-theory/">计算理论 Theory of Computation</a>
</li>
<li class="cat-item cat-item-252"><a href="https://powcoder.com/category/computer-security/">计算机安全密码学computer security cryptography</a>
</li>
<li class="cat-item cat-item-246"><a href="https://powcoder.com/category/sys-programming/">系统编程 System programming</a>
</li>
<li class="cat-item cat-item-367"><a href="https://powcoder.com/category/%e6%95%b0%e5%80%bc%e7%a7%91%e5%ad%a6%e8%ae%a1%e7%ae%97/">数值科学计算</a>
</li>
<li class="cat-item cat-item-255"><a href="https://powcoder.com/category/%e8%ae%a1%e7%ae%97%e6%9c%ba%e8%a7%86%e8%a7%89compute-vision/">计算机视觉代写代考(Compute Vision)</a>
</li>
<li class="cat-item cat-item-248"><a href="https://powcoder.com/category/web/">网页应用 Web Application</a>
</li>
<li class="cat-item cat-item-401"><a href="https://powcoder.com/category/%e5%88%86%e5%b8%83%e5%bc%8f%e7%b3%bb%e7%bb%9f/">分布式系统</a>
</li>
<li class="cat-item cat-item-640"><a href="https://powcoder.com/category/%e7%ac%94%e8%af%95%e9%9d%a2%e8%af%95/">笔试面试</a>
</li>
<li class="cat-item cat-item-403"><a href="https://powcoder.com/category/%e5%87%bd%e6%95%b0%e5%bc%8f%e7%bc%96%e7%a8%8b/">函数式编程</a>
</li>
<li class="cat-item cat-item-243"><a href="https://powcoder.com/category/%e6%95%b0%e6%8d%ae%e6%8c%96%e6%8e%98-data-mining/">数据挖掘 Data Mining</a>
</li>
<li class="cat-item cat-item-364"><a href="https://powcoder.com/category/%e7%a6%bb%e6%95%a3%e6%95%b0%e5%ad%a6/">离散数学代写代考 (Discrete mathematics)</a>
</li>
<li class="cat-item cat-item-384"><a href="https://powcoder.com/category/%e8%bd%af%e4%bb%b6%e5%b7%a5%e7%a8%8b/">软件工程</a>
</li>
<li class="cat-item cat-item-551"><a href="https://powcoder.com/category/%e7%bc%96%e7%a8%8b%e8%af%ad%e8%a8%80-programming-language/">编程语言 Programming Language</a>
</li>
<li class="cat-item cat-item-594"><a href="https://powcoder.com/category/%e7%bb%9f%e8%ae%a1%e4%bb%a3%e5%86%99%e4%bb%a3%e8%80%83/">统计代写代考</a>
</li>
<li class="cat-item cat-item-574"><a href="https://powcoder.com/category/%e8%bf%90%e7%ad%b9%e5%ad%a6-operation-research/">运筹学 Operation Research</a>
</li>
</ul>
</nav></aside><aside id="tag_cloud-3" class="widget widget_tag_cloud"><h2 class="widget-title">Tag</h2><nav aria-label="Tag"><div class="tagcloud"><a href="https://powcoder.com/tag/algorithm/" class="tag-cloud-link tag-link-469 tag-link-position-1" style="font-size: 18px;" aria-label="Algorithm算法代写代考 (15,143 items)">Algorithm算法代写代考</a><a href="https://powcoder.com/tag/java/" class="tag-cloud-link tag-link-298 tag-link-position-2" style="font-size: 16.91156462585px;" aria-label="Java代写代考 (7,271 items)">Java代写代考</a><a href="https://powcoder.com/tag/database/" class="tag-cloud-link tag-link-414 tag-link-position-3" style="font-size: 16.503401360544px;" aria-label="database (5,442 items)">database</a><a href="https://powcoder.com/tag/data-structure/" class="tag-cloud-link tag-link-501 tag-link-position-4" style="font-size: 16.401360544218px;" aria-label="data structure (5,185 items)">data structure</a><a href="https://powcoder.com/tag/python/" class="tag-cloud-link tag-link-331 tag-link-position-5" style="font-size: 16.299319727891px;" aria-label="Python代写代考 (4,810 items)">Python代写代考</a><a href="https://powcoder.com/tag/compiler/" class="tag-cloud-link tag-link-472 tag-link-position-6" style="font-size: 16.027210884354px;" aria-label="compiler (4,000 items)">compiler</a><a href="https://powcoder.com/tag/scheme/" class="tag-cloud-link tag-link-338 tag-link-position-7" style="font-size: 15.823129251701px;" aria-label="Scheme代写代考 (3,502 items)">Scheme代写代考</a><a href="https://powcoder.com/tag/c-4/" class="tag-cloud-link tag-link-499 tag-link-position-8" style="font-size: 15.823129251701px;" aria-label="C语言代写 (3,489 items)">C语言代写</a><a href="https://powcoder.com/tag/ai/" class="tag-cloud-link tag-link-369 tag-link-position-9" style="font-size: 15.176870748299px;" aria-label="AI代写 (2,216 items)">AI代写</a><a href="https://powcoder.com/tag/c-3/" class="tag-cloud-link tag-link-491 tag-link-position-10" style="font-size: 14.700680272109px;" aria-label="c++代写 (1,633 items)">c++代写</a><a href="https://powcoder.com/tag/sql/" class="tag-cloud-link tag-link-395 tag-link-position-11" style="font-size: 14.530612244898px;" aria-label="SQL代写代考 (1,457 items)">SQL代写代考</a><a href="https://powcoder.com/tag/haskell/" class="tag-cloud-link tag-link-291 tag-link-position-12" style="font-size: 14.530612244898px;" aria-label="Haskell代写代考 (1,453 items)">Haskell代写代考</a><a href="https://powcoder.com/tag/javascript/" class="tag-cloud-link tag-link-299 tag-link-position-13" style="font-size: 14.462585034014px;" aria-label="javascript (1,395 items)">javascript</a><a href="https://powcoder.com/tag/concurrency/" class="tag-cloud-link tag-link-503 tag-link-position-14" style="font-size: 14.428571428571px;" aria-label="concurrency (1,355 items)">concurrency</a><a href="https://powcoder.com/tag/matlab/" class="tag-cloud-link tag-link-309 tag-link-position-15" style="font-size: 14.360544217687px;" aria-label="matlab代写代考 (1,281 items)">matlab代写代考</a><a href="https://powcoder.com/tag/finance/" class="tag-cloud-link tag-link-282 tag-link-position-16" style="font-size: 14.292517006803px;" aria-label="finance (1,221 items)">finance</a><a href="https://powcoder.com/tag/interpreter/" class="tag-cloud-link tag-link-297 tag-link-position-17" style="font-size: 14.190476190476px;" aria-label="interpreter (1,144 items)">interpreter</a><a href="https://powcoder.com/tag/mips/" class="tag-cloud-link tag-link-313 tag-link-position-18" style="font-size: 14.156462585034px;" aria-label="MIPS汇编代写代考 (1,134 items)">MIPS汇编代写代考</a><a href="https://powcoder.com/tag/data-mining/" class="tag-cloud-link tag-link-271 tag-link-position-19" style="font-size: 13.986394557823px;" aria-label="data mining (991 items)">data mining</a><a href="https://powcoder.com/tag/decision-tree/" class="tag-cloud-link tag-link-273 tag-link-position-20" style="font-size: 13.952380952381px;" aria-label="decision tree (982 items)">decision tree</a><a href="https://powcoder.com/tag/deep-learning/" class="tag-cloud-link tag-link-274 tag-link-position-21" style="font-size: 13.952380952381px;" aria-label="deep learning深度学习代写代考 (980 items)">deep learning深度学习代写代考</a><a href="https://powcoder.com/tag/prolog/" class="tag-cloud-link tag-link-329 tag-link-position-22" style="font-size: 13.918367346939px;" aria-label="Prolog代写代考 (957 items)">Prolog代写代考</a><a href="https://powcoder.com/tag/file-system/" class="tag-cloud-link tag-link-281 tag-link-position-23" style="font-size: 13.850340136054px;" aria-label="file system (902 items)">file system</a><a href="https://powcoder.com/tag/c/" class="tag-cloud-link tag-link-265 tag-link-position-24" style="font-size: 13.578231292517px;" aria-label="c++代做 (764 items)">c++代做</a><a href="https://powcoder.com/tag/computer-architecture/" class="tag-cloud-link tag-link-507 tag-link-position-25" style="font-size: 13.47619047619px;" aria-label="computer architecture (712 items)">computer architecture</a><a href="https://powcoder.com/tag/er/" class="tag-cloud-link tag-link-433 tag-link-position-26" style="font-size: 13.47619047619px;" aria-label="ER (711 items)">ER</a><a href="https://powcoder.com/tag/gui/" class="tag-cloud-link tag-link-290 tag-link-position-27" style="font-size: 13.47619047619px;" aria-label="gui (711 items)">gui</a><a href="https://powcoder.com/tag/gpu/" class="tag-cloud-link tag-link-396 tag-link-position-28" style="font-size: 13.272108843537px;" aria-label="GPU (620 items)">GPU</a><a href="https://powcoder.com/tag/data-science/" class="tag-cloud-link tag-link-272 tag-link-position-29" style="font-size: 13.272108843537px;" aria-label="data science (615 items)">data science</a><a href="https://powcoder.com/tag/x86%e6%b1%87%e7%bc%96/" class="tag-cloud-link tag-link-514 tag-link-position-30" style="font-size: 13.238095238095px;" aria-label="x86汇编代写代考 (606 items)">x86汇编代写代考</a><a href="https://powcoder.com/tag/case-study/" class="tag-cloud-link tag-link-468 tag-link-position-31" style="font-size: 13.204081632653px;" aria-label="case study (586 items)">case study</a><a href="https://powcoder.com/tag/distributed-system/" class="tag-cloud-link tag-link-277 tag-link-position-32" style="font-size: 13.170068027211px;" aria-label="distributed system (576 items)">distributed system</a><a href="https://powcoder.com/tag/android/" class="tag-cloud-link tag-link-256 tag-link-position-33" style="font-size: 13.034013605442px;" aria-label="android (527 items)">android</a><a href="https://powcoder.com/tag/kernel/" class="tag-cloud-link tag-link-470 tag-link-position-34" style="font-size: 13.034013605442px;" aria-label="kernel (520 items)">kernel</a><a href="https://powcoder.com/tag/arm/" class="tag-cloud-link tag-link-483 tag-link-position-35" style="font-size: 13px;" aria-label="ARM汇编代写代考 (514 items)">ARM汇编代写代考</a></div>
</nav></aside><aside id="block-4" class="widget widget_block">
<div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><div class="wp-block-group__inner-container"><ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://powcoder.com/2024/11/17/%e7%95%99%e5%ad%a6%e7%94%9f%e4%bd%9c%e4%b8%9a%e4%bb%a3%e5%86%99-comp9313-project-3/">留学生作业代写 COMP9313 Project 3</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://powcoder.com/2024/10/12/%e7%a8%8b%e5%ba%8f%e4%bb%a3%e5%86%99-comp2521-24t3-assignment-1-2/">程序代写 COMP2521 24T3 – Assignment 1</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://powcoder.com/2024/10/12/%e4%bb%a3%e5%86%99%e4%bb%a3%e8%80%83-compsys-705-formal-methods-for-safety-critical-software-test-17-october-20/">代写代考 COMPSYS 705 Formal Methods for Safety Critical Software Test, 17 October 20</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://powcoder.com/2024/10/07/%e7%a8%8b%e5%ba%8f%e4%bb%a3%e5%86%99-comp2521-24t3-assignment-1/">程序代写 COMP2521 24T3 – Assignment 1</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://powcoder.com/2024/09/30/%e7%a8%8b%e5%ba%8f%e4%bb%a3%e5%86%99-comp4500-7500-2/">程序代写 COMP4500/7500</a></li>
</ul></div></div>
</aside>
</div><!-- .sidebar-main -->
</div><!-- #secondary -->
</div> <!-- ast-container -->
</div><!-- #content -->
<footer
class="site-footer" id="colophon" itemtype="https://schema.org/WPFooter" itemscope="itemscope" itemid="#colophon">
<div class="site-below-footer-wrap ast-builder-grid-row-container site-footer-focus-item ast-builder-grid-row-full ast-builder-grid-row-tablet-full ast-builder-grid-row-mobile-full ast-footer-row-stack ast-footer-row-tablet-stack ast-footer-row-mobile-stack" data-section="section-below-footer-builder">
<div class="ast-builder-grid-row-container-inner">
<div class="ast-builder-footer-grid-columns site-below-footer-inner-wrap ast-builder-grid-row">
<div class="site-footer-below-section-1 site-footer-section site-footer-section-1">
<div class="ast-builder-layout-element ast-flex site-footer-focus-item ast-footer-copyright" data-section="section-footer-builder">
<div class="ast-footer-copyright"><p>Copyright © 2024 PowCoder代写 | Powered by <a href="https://wpastra.com/" rel="nofollow noopener" target="_blank">Astra WordPress Theme</a></p>
</div> </div>
</div>
</div>
</div>
</div>
</footer><!-- #colophon -->
</div><!-- #page -->
<link rel="stylesheet" href="https://powcoder.com/wp-content/cache/minify/12163.css" media="all" />
<script id="astra-theme-js-js-extra">
var astra = {"break_point":"921","isRtl":"","is_scroll_to_id":"","is_scroll_to_top":"","is_header_footer_builder_active":"1","responsive_cart_click":"flyout"};
</script>
<script src="https://powcoder.com/wp-content/cache/minify/75800.js"></script>
<script src="https://stats.wp.com/e-202447.js" id="jetpack-stats-js" data-wp-strategy="defer"></script>
<script id="jetpack-stats-js-after">
_stq = window._stq || [];
_stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"132118579\",\"post\":\"53765\",\"tz\":\"8\",\"srv\":\"powcoder.com\",\"j\":\"1:14.0\"}") ]);
_stq.push([ "clickTrackerInit", "132118579", "53765" ]);
</script>
<script>
/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);
</script>
</body>
</html>
<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/
Object Caching 275/339 objects using Disk
Page Caching using Disk: Enhanced
Content Delivery Network via N/A
Minified using Disk
Served from: powcoder.com @ 2024-11-25 06:27:40 by W3 Total Cache
-->